Original article: CSS Responsive Image Tutorial: How to Make Images Responsive with CSS
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!