Esto es solo un problema en Safari y me parece un error de Safari. Aquí hay un violín con una versión simplificada del problema.
Cuando una imagen está en un elemento flexbox anidado con un conjunto de ancho y height: auto , se está estirando... el alto automático no funciona. ¿Es necesario agregar algo adicional para que esto funcione en Safari?
.container { display: flex; flex-direction: column; } .container section:first-child { display: flex; margin-bottom: 25px; } .container img { width: 125px; height: auto; } <div class="container"> <section> <img src="https://via.placeholder.com/250"> </section> <section> <img src="https://via.placeholder.com/150"> </section> </div>Espero que la altura de la imagen se ajuste automáticamente para mantener la relación de aspecto. Esto funciona en todos los navegadores excepto Safari. En Safari, la imagen se estira y la altura automática no funciona.
Para cualquiera que revise esta publicación en el futuro: tuve este problema con un flex-direction:row flexbox de altura fija e imágenes dentro de flex-child con height:100% . La solución más votada no fue suficiente para solucionarlo.
Por alguna razón, lo que finalmente lo arregló en mi caso fue agregar display:block directamente a las imágenes.
si la etiqueta padre <img/> tiene display:flex; agregar align-items: center;
<div style="display:flex;align-items: center;"> <img "img.jpg"/> </div>Para mí ninguna de las soluciones funcionó. Ya tenía flex-direction: column y aligh-items: center , aunque, en mi caso, también tenía algunos otros elementos en el mismo contenedor flexible, junto con la imagen. No estoy seguro si tuvo algún impacto.
Lo que realmente solucionó el problema en mi caso fue simplemente envolver la imagen con un div:
<section> <div> <img src="https://via.placeholder.com/250"> </div> </section>Vea mi demostración para ver un ejemplo funcional, agregue flex-direction: column; para solucionar este problema.
.container { display: flex; flex-direction: column; } .container section:first-child { display: flex; flex-direction: column; margin-bottom: 25px; } .container img { width: 125px; height: auto; } <div class="container"> <section> <img src="https://via.placeholder.com/250"> </section> <section> <img src="https://via.placeholder.com/150"> </section> </div>Ciertamente parece ser un error.
La configuración predeterminada para la propiedad align-items es stretch . La mayoría de los principales navegadores manejan esto con sensatez, estirando la imagen dentro de los límites del contenedor .
Por alguna razón, Safari estira la imagen a su altura natural, llevándose el contenedor por el camino.
flex-direction: row Para solucionar el problema, anule el valor predeterminado de stretch con flex-start en la propiedad align-items .
.container { display: flex; flex-direction: column; } .container section:first-child { display: flex; align-items: flex-start; /* new */ margin-bottom: 25px; } .container img { width: 125px; height: auto; } <div class="container"> <section> <img src="http://i.imgur.com/60PVLis.png"> </section> <section> <img src="http://i.imgur.com/60PVLis.png"> </section> </div>flex-direction: column Cambiar la dirección del contenedor flexible a la column también soluciona el problema. Esto funciona porque align-items ahora se aplican al ancho y ha definido un ancho en la imagen.
Si invierte las dimensiones de la imagen de
.container img { width: 125px; height: auto; }para
.container img { width: auto; height: 125px; } ... tendrá el mismo problema en Safari que en flex-direction: row , y necesitará align-items: flex-start para la corrección.
.container { display: flex; flex-direction: column; } .container section:first-child { display: flex; /* align-items: flex-start; */ margin-bottom: 25px; } .container img { width: auto; height: 125px; } <div class="container"> <section> <img src="http://i.imgur.com/60PVLis.png"> </section> <section> <img src="http://i.imgur.com/60PVLis.png"> </section> </div>Sumar altura: intrínseco; me funciona para arreglar la altura estirada en safari. Añádelo a la imagen misma. No el envoltorio. Aún necesitará height: auto para los otros navegadores.