La mayoría de los sitios web actuales son receptivos. Y si necesita centrar y alinear la imagen en ese sitio, debe aprender cómo hacer que las imágenes sean fluidas o receptivas con CSS.
Publiqué un video tutorial que explica cómo hacer un sitio web receptivo paso a paso hace un par de semanas. En el video hicimos una imagen responsive. Pero en esta publicación, me gustaría dar un poco más de detalle sobre cómo hacer que las imágenes respondan.
También aprenderá algunos de los problemas generales que pueden ocurrir cuando intenta hacer que las imágenes respondan, y trataré de explicar cómo resolverlos.
Cómo hacer que las imágenes sean receptivas con CSS
¿Debo usar unidades relativas o absolutas?
Hacer una imagen fluida, o receptiva, es bastante simple. Cuando subes una imagen a tu sitio web, tiene un ancho y un alto predeterminados. Puede cambiarlos ambos con CSS.
Para que una imagen responda, debe darle un nuevo valor a su propiedad de ancho. Luego, la altura de la imagen se ajustará automáticamente.
Lo importante que debe saber es que siempre debe usar unidades relativas para la propiedad de ancho como porcentaje, en lugar de unidades absolutas como píxeles.
img { width: 500px; }
Por ejemplo, si define un ancho fijo de 500px, su imagen no responderá, porque la unidad es absoluta.
img { width: 50%; }
Es por eso que debería asignar una unidad relativa como el 50%. Este enfoque hará que sus imágenes sean fluidas y podrán cambiar de tamaño independientemente del tamaño de la pantalla.
¿Debo utilizar consultas de medios?
Una de las preguntas que más me hacen es si debería utilizar consultas de medios o no.
Una consulta de medios es otra característica importante de CSS que ayuda a que un sitio web sea receptivo. No entraré en más detalles aquí, pero puede leer mi otra publicación más adelante para aprender cómo usar las consultas de medios con más detalle.
La respuesta a esa pregunta es: "depende". Si desea que su imagen tenga diferentes tamaños de un dispositivo a otro, deberá utilizar consultas de medios. De lo contrario, no lo harás.
Ahora, para este ejemplo, su imagen tiene un ancho del 50% para cualquier tipo de pantalla. Pero cuando desee que sea de tamaño completo para dispositivos móviles, debe obtener ayuda de las consultas de medios:
@media only screen and (max-width: 480px) { img { width: 100%; } }
Entonces, según la regla de consulta de medios, cualquier dispositivo de menos de 480px tomará el tamaño completo del ancho de la pantalla.
También puede ver la versión en video de esta publicación a continuación:
¿Por qué la propiedad de ancho máximo no es excelente?
Otra forma en que los desarrolladores pueden crear imágenes receptivas es la propiedad de ancho máximo. Sin embargo, este no es siempre el mejor método a utilizar, ya que puede que no funcione para todos los tipos de dispositivos o tamaños de pantalla.
Lo primero que debemos 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, lo que no permite que el ancho de ese elemento sea mayor que su valor de ancho máximo (pero puede ser menor).
Por ejemplo, si la imagen tiene un ancho predeterminado de 500 px, y si el tamaño de su pantalla tiene solo 360 px, entonces no podrá ver la imagen completa porque no hay suficiente espacio:
img { max-width: 100%; width: 500px; // assume this is the default size }
Por lo tanto, puede definir una propiedad de ancho máximo 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, dado que estás usando una unidad relativa, la imagen será fluida en cualquier dispositivo menor a 500px.
Desafortunadamente, el tamaño de la pantalla será algo mayor a 500 px, pero la imagen no lo hará porque tiene un ancho predeterminado de 500 px. Este enfoque romperá la capacidad de respuesta de la imagen.
Para solucionar este problema, debe usar la propiedad width nuevamente, lo que hace que la propiedad max-width sea inútil.
¿Qué pasa con Heights?
Otro problema común que puede encontrar tiene que ver con la propiedad de altura. Normalmente, la altura de una imagen cambia automáticamente de tamaño, por lo que no necesita asignar una propiedad de altura a sus imágenes (porque rompe un poco la imagen).
Pero en algunos casos, es posible que deba trabajar con imágenes que deben tener una altura fija. Entonces, cuando asigne una altura fija a la imagen, seguirá respondiendo pero no se verá bien.
img { width: 100%; height: 300px; }
Afortunadamente, CSS ofrece otra propiedad para solucionar este problema ...
Solución: la propiedad de ajuste al objeto
Para tener más control sobre sus imágenes, CSS proporciona otra propiedad llamada ajuste de objeto. Usemos la propiedad de ajuste de objeto y asignemos un valor, que hará que su imagen se vea mejor:
img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }
Si es necesario, también puede usar la propiedad object-position (además de object-fit) para enfocarse en una parte específica de la imagen. Muchas personas no conocen la propiedad de ajuste al objeto, pero puede ser útil para solucionar este tipo de problemas.
Espero que esta publicación te haya ayudado a comprender y resolver tus problemas con imágenes receptivas. Si desea obtener más información sobre el desarrollo web, no dude en visitar mi canal de Youtube.
¡Gracias por leer!