La mayoría de los sitios web actuales son responsivos. Y si necesitas centrar y alinear la imagen en esos sitios, necesitas aprender cómo hacer imágenes fluidas o responsivas con CSS.

En esta publicación me gustaría dar un poco más de detalle sobre cómo hacer que las imágenes sean responsivas.

También aprenderás algunos de los problemas generales que pueden ocurrir cuando intentas hacer imágenes responsivas - e intentaré explicar cómo resolverlos.

Cómo hacer imágenes responsivas con CSS

¿Deberías usar unidades relativas o absolutas?

Hacer que una imagen sea fluida, o responsiva, es en realidad muy sencillo. Cuando subes una imagen a tu sitio web, tiene una anchura y una altura por defecto. Puedes cambiar ambos con CSS.

Para hacer que una imagen sea responsiva, tienes que dar un nuevo valor a su propiedad de anchura. La altura de la imagen se ajustará automáticamente.

Lo importante es saber que siempre debes utilizar unidades relativas para la propiedad de anchura, como el porcentaje, en lugar de las absolutas, como los píxeles.

img {
  width: 500px;
}

Por ejemplo, si defines una anchura fija de 500px, tu imagen no será responsiva - porque su unidad es absoluta.

img {
  width: 50%;
}

Es por esto que en su lugar debes asignar un valor relativo como 50%. Este enfoque hará que tus imágenes sean fluidas y podrán cambiar de tamaño por sí mismas independientemente del tamaño de la pantalla.

¿Debes usar las consultas de medios (media queries)?

Una de las preguntas que más me hacen es si hay que usar consultas de medios o no.

Una consulta de medios es otra característica importante de CSS que ayuda a hacer un sitio web responsivo. No voy a entrar en más detalles aquí, pero puedes leer mi otro post más adelante para aprender a utilizar las consultas de medios con más detalles.

La respuesta a esa pregunta es: "depende". Si quieres que tu imagen tenga distintos tamaños de un dispositivo a otro, entonces tendrás que usar consultas de medios. De lo contrario, no las necesitas.

Ahora, para este ejemplo, tu imagen tiene un ancho del 50% para cualquier tipo de pantalla. Pero cuando quieras hacerla de tamaño completo para dispositivos móviles, necesitarás la ayuda de las consultas de medios:

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

Por lo tanto, basándonos en la regla de la consulta de medios, en cualquier dispositivo menor a 480px la imagen tomará el ancho completo de la pantalla.

¿Por qué la propiedad max-width (ancho máximo) no es buena?

Otra forma en la que los desarrolladores pueden crear imágenes responsivas es con la propiedad max-width. Sin embargo, este no es siempre el mejor método a utilizar, ya que puede que no funcione para todos los tamaños de pantalla o dispositivos.

Lo primero a entender antes de continuar con un ejemplo es qué hace exactamente la propiedad max-width.

La propiedad max-width establece un ancho máximo para un elemento que no permite que el ancho de ese elemento sea mayor que su valor de max-width (pero puede ser menor).

Por ejemplo, si la imagen tiene un ancho por defecto de 500px, y tu pantalla tiene sólo 360px, entonces no podrás ver la imagen completa, porque no hay suficiente espacio:

img {
  max-width: 100%;
  width: 500px;  // asume que este es el tamaño por defecto 
}

Por lo tanto, puedes definir una propiedad de max-width para la imagen y establecerla en 100%, lo que reduce la imagen de 500px al espacio de 360px. Así podrás ver la imagen completa en una pantalla de menor tamaño.

Lo bueno es que, al estar usando una unidad relativa, la imagen será fluida en cualquier dispositivo menor a 500px.

Desafortunadamente, si el tamaño de la pantalla es algo más grande que 500px, la imagen no aumentará, ya que su ancho por defecto es de 500px. Este enfoque romperá lo responsivo de la imagen.

Para corregir esto, necesitas utilizar la propiedad de ancho (width) de nuevo, lo que hace que la propiedad max-width sea inútil.

¿Y qué pasa con la altura?

Otro problema con el que te puedes encontrar tiene que ver con la propiedad de altura. Normalmente, la altura de una imagen se redimensiona automáticamente, así que no necesitas asignar una propiedad de altura a las imágenes (porque rompe un poco la imagen).

Pero en ocasiones es posible que tengas que trabajar con imágenes que deben tener una altura fija. Entonces, si asignas una altura fija a la imagen, esta seguirá respondiendo, pero no se verá bien.

img {
  width: 100%;
  height: 300px;
}

Afortunadamente, hay otra propiedad CSS para arreglar este problema...

Solución: la propiedad object-fit

Para tener más control sobre tus imágenes, CSS ofrece otra propiedad llamada object-fit. Utilicemos la propiedad object-fit y asignémosle un valor, que hará que tu imagen se vea mejor:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

Si lo necesitas, también puedes utilizar la propiedad object-position (adicionalmente a object-fit) para enfocar una parte específica de la imagen. Muchas personas no conocen la propiedad object-fit, pero puede ser útil para solucionar este tipo de problemas.

Espero esta publicación te haya ayudado a comprender y resolver tus problemas con imágenes responsivas. Si quieres aprender más sobre desarrollo web, no dudes en visitar mi canal de Youtube.

¡Gracias por leer!

Crear una página web era mucho más sencillo antes. Ahora el diseño de una página web ha de adaptarse no solo a los ordenadores, sino también a las tablets, móviles e incluso los televisores.

Crear una página web con un diseño flexible se llama Diseño Web Responsivo y las consultas de medios CSS son uno de los elementos más importantes del Diseño Responsivo. En este artículo profundizaremos en las consultas de medios y cómo usarlas en CSS.

¿Qué es una consulta de medios?

Una consulta de medios es un componente de CSS3 que hace que una página web adapte su diseño a diferentes tamaños de pantalla y tipos de medios.

Sintaxis

@media media type and (condition: breakpoint) {
  // reglas CSS
}

Podemos establecer diferentes tipos de medios bajo una variedad de condiciones. Si la condición y/o el tipo de medio se cumplen, la regla dentro de la consulta de medios se aplicará.

La sintaxis pueda parecer un poco complicada al principio, así que vamos a explicar cada parte en más detalle...

La regla @ media

Comenzamos definiendo la consulta de medios con la regla @media y después incluimos las reglas CSS entre los paréntesis. La regla @media también se usa para especificar los tipos de medios.

@media () {
  // reglas CSS
}

Paréntesis

Dentro de los paréntesis establecemos una condición. Por ejemplo, quiero aplicar un tamaño de fuente mayor en los teléfonos móviles. Para hacer esto, necesitamos establecer un ancho máximo que compruebe el ancho de un dispositivo:

.texto {
  font-size: 14px;
}

@media (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

El tamaño del texto es de 14px. Sin embargo, como hemos aplicado una consulta de medios, el tamaño del texto será de 16px cuando el ancho máximo del dispositivo sea de 480px o menos.

Importante: añade tus consultas de medios siempre al final de tu documento CSS.

Tipo de medios

Si no establecemos ningún tipo de medio, la regla @media selecciona todos los dispositivos por defecto. Los tipos de medios se aplican justo a continuación de la regla @media. Existen muchos tipos de dispositivos, pero podemos agruparlos en 4 categorías:

• all — para todo los tipos de medios
• print — para impresoras
• screen — para pantallas de ordenador, tablets y smartphones
• speech — para lectores de pantalla que "leen" la página en voz alta

Por ejemplo, si quiero seleccionar solo pantallas, usaré la palabra screen justo después de la regla @media. También tengo que unir ambas reglas con la palabra "and":

@media screen and (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

Breakpoints

El breakpoint es quizás uno de los conceptos que escuches y uses más a menudo. Un breakpoint es esencial a la hora de determinar cuándo cambiar el diseño y adaptar las reglas dentro de las consultas de medios. Volvamos a nuestro ejemplo del principio:

@media (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

Aquí el breakpoint es 480px. La consulta de medios sabe cuándo establecer o sobreescribir la nueva clase. Básicamente, si el ancho de un dispositivo es menos de 480px, la clase texto se aplicará, si no, no.

Breakpoints comunes: ¿existe una resolución estándar?

Una de las cuestiones que más se pregunta es “¿Qué breakpoint tengo que usar?”. Existen una gran cantidad de dispositivos en el mercado, con lo que no podemos ni debemos definir breakpoints fijos para cada uno de ellos.

Por ello, no podemos decir que existe una resolución estándar para todos los dispositivos, sino breakpoints de uso común en el día a día de la programación. Si estás utilizando un framework CSS (como Bootstrap, Bulma, etc.) también puedes usar sus breakpoints.

Vamos a ver ahora los breakpoints comunes según el ancho de los dispositivos:

• 320px — 480px: Dispositivos móviles
• 481px — 768px: iPads, tablets
• 769px — 1024px: pantallas pequeñas, ordenadores portátiles
• 1025px — 1200px: pantallas grandes, ordenadores de escritorio
• 1201px y más —  pantallas extra-grandes, televisores

Como menciono anteriormente, estos breakpoints son flexibles, ya que no existe una definición estándar, sino algunos de uso común.

Conclusión

El diseño responsivo es actualmente imprescindible en el mundo del diseño y desarrollo web. Las consultas de medios son una de las partes más importantes para crear diseños responsivos. Espero que mi artículo te ayude a comprender cómo funcionan las consultas de medios.

Si quieres aprender más sobre desarrollo web, suscríbete gratis a mi canal.

¡Gracias por leer mi artículo!