Si está involucrado en el desarrollo web, es muy probable que esté familiarizado con dos monstruos, que se discutirán en el artículo, cuya traducción publicamos hoy. Estamos hablando de imágenes y plazos. A veces, por alguna razón, las imágenes no quieren encajar en los lugares de los diseños de página diseñados para ellas, y no puede pasar varias horas para descubrirlo.
El autor de este material dice que a menudo se enfrentaba a un problema similar, y estas colisiones le enseñaron algo. Aquí quiere hablar sobre cinco enfoques para administrar los tamaños de imagen que más le gustan.
Enfoque n. ° 1: imagen de fondo
Viernes Las cinco de la tarde. Necesitas urgentemente terminar una página determinada. Todo está listo, el único problema son las imágenes, que de ninguna manera encajan donde deberían estar. Si esto te sucedió, aquí hay una herramienta mágica que te ayudará:
.myImg { background-image: url("my-image.png"); background-size: cover; }
¿Te resulta familiar? Todos hicimos esto una vez. ¿Te sugirió esto fraude?
Usar las propiedades de
background es muy útil, solo hacen lo que se espera de ellas. Sin embargo, vale la pena recordar que deben usarse solo para aquellas imágenes que no son parte del contenido principal de la página, para imágenes que reemplazan texto y, en algunos
casos especiales .
Enfoque n. ° 2: ajuste del objeto
¿Qué sucede si digo que la propiedad de
object-fit aplica a los elementos
<img> ? Por cierto, también funciona con video.
.myImg { object-fit: cover; width: 320px; height: 180px; }
Eso es todo Tenga en cuenta que la propiedad de
object-fit se puede configurar para
contain .
Support Soporte de ajuste de objeto
Desafortunadamente,
object-fit no funcionará en IE y en versiones anteriores de Safari, sin embargo, para tales casos hay un
polyfill .
Aquí está la información de soporte tomada
de aquí .
Soporte para navegadores de escritorio ajustados a objetos→
Aquí hay un ejemplo usando el ajuste de objetos
Enfoque n. ° 3: la forma en que Netflix usa
Lo que acabamos de hablar puede parecer interesante, pero en navegadores obsoletos, sin polyfills, esto no funcionará. Si necesita algo universal, quizás de lo que vamos a hablar ahora sea el adecuado para usted. Este método, uno de mis favoritos, funciona en todas partes.
Consiste en el hecho de que la imagen debe colocarse en el elemento principal, cuya propiedad de
position se establece como
relative , y la propiedad de
padding se establece en términos porcentuales. Como resultado, la imagen ocupará toda el área libre del elemento padre. Se ve así:
.wrapper { position: relative; padding-top: 56.25%; } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
Aquí puede pensar que es demasiado complicado. Sin embargo, después de comprender el significado de esta técnica, se da cuenta de que es muy simple y conveniente. Además, esta técnica se
usa ampliamente , por ejemplo, en Netflix.
Echa un vistazo a los nombres de las clases→
Aquí hay un ejemplo de la implementación de esta técnica
Enfoque n. ° 4: altura
Aquí, para controlar el tamaño de la imagen, use la propiedad
height: auto y, además, la propiedad
max-width . Es posible que ya conozcas esta técnica:
img { height: auto; width: 100%; max-width: 720px; }
Este enfoque es aplicable en la mayoría de los casos, cuando su diseño no es demasiado complicado.
→
Aquí hay un ejemploEnfoque n. ° 5: Gestión de imagen y rendimiento
Por "rendimiento" me refiero al tiempo de carga de la página. Una imagen grande puede tardar mucho tiempo en cargarse, lo que le da al usuario la impresión de que sus páginas son lentas, especialmente si se ven en dispositivos móviles.
¿Sabe que en
los navegadores modernos puede cambiar la fuente de la imagen dependiendo del ancho de la página? Por eso
srcset atributo
srcset .
Se pueden usar atributos similares en la etiqueta HTML 5
. , , <img> . , , <img> :
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture>
→ Aquí hay un ejemploResumen
Para resumir:
- Si su imagen no es parte del contenido de la página, use
background-image . - Si el soporte de IE no le interesa, use
object-fit . - La tecnología de contenedores basada en Netflix con
padding personalizado funciona en todas partes. - En la mayoría de los casos, para resolver el problema con las imágenes, es suficiente usar la propiedad
height: auto en CSS; - Si desea reducir el tiempo de carga de la página, use el atributo
srcset para descargar imágenes más pequeñas en dispositivos móviles.
Esperamos que los enfoques para trabajar con las imágenes discutidas aquí le sean útiles.
