Chrome estira las imágenes establecidas por CSS en una relación de aspecto 1/1.
No tengo el ancho ni el alto de la imagen para agregar como atributo, por lo que la solución que busco es configurar la relación de aspecto.
El problema es que Chrome estira la imagen si el ancho de la imagen es mayor que el contenedor. Sin embargo, la imagen se ve bien en Firefox.
body {
max-width: 400px;
}
img {
height: auto;
max-width: 100%;
aspect-ratio: 1 / 1;
}
<img src='https://images.unsplash.com/photo-1640113163135-dd802f7e5961?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60'>
<img src='https://images.unsplash.com/photo-1640127444725-3926729d6ebd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=963&q=80'>
Demo: https://codepen.io/ahmadajmi/full/yLzzqVo
Intenté jugar con object-fit: scale-down; pero terminé con espacios en blanco antes y después de la imagen.
Vista en Firefox:
Vista en Chrome:
¿Alguna sugerencia para solucionar en Chrome?
davy.ai
El problema mencionado se puede solucionar agregando
object-fit: contain;a la regla CSSimg, lo cual evitará que Chrome estire la imagen. El valorcontainse asegurará de que la imagen completa sea visible dentro del contenedor, sin distorsionar la relación de aspecto. La regla CSS actualizada para el elementoimgserá:Esto asegurará que la imagen se vea consistente en todos los navegadores modernos, incluyendo Chrome y Firefox.