Usando el modelo de caja flexible CSS, ¿cómo puedo forzar una imagen a mantener su relación de aspecto?

JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/

Observe que las imágenes se estiran o encogen para llenar el ancho del contenedor. Está bien, pero ¿podemos hacer que también se estire o encoja la altura para mantener las proporciones de la imagen?

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

Para las etiquetas img, si define un lado, el otro lado cambia de tamaño para mantener la relación de aspecto y, por defecto, las imágenes se expanden a su tamaño original.

Usando este hecho, si envuelve cada etiqueta img en la etiqueta div y establece su ancho al 100% del div principal, la altura estará de acuerdo con la relación de aspecto que desee.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

Para evitar que las imágenes se estiren en cualquiera de los ejes dentro de un padre flexible, he encontrado un par de soluciones.

Puede intentar usar el ajuste de objeto en la imagen que, por ejemplo,

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

O puede agregar reglas específicas de flexibilidad que pueden funcionar mejor en algunos casos.

align-self: center;
flex: 0 0 auto;

No es necesario agregar un div contenedor.

El valor predeterminado de la propiedad css "align-items" es "stretch", que es lo que hace que las imágenes se estiren a su altura original completa. Establecer la propiedad css "align-items" en "flex-start" soluciona el problema.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

La mayoría de imágenes con dimensiones intrínsecas , es decir, un tamaño natural, como una jpegimagen. Si el tamaño especificado define tanto el ancho como el alto, el valor faltante se determina utilizando la relación intrínseca ... - ver MDN .

Pero eso no funciona como se esperaba si las imágenes que se configuran como elementos de flexión directa con el módulo de diseño de caja flexible actual Nivel 1 , hasta donde yo sé.

Vea estas discusiones y los informes de errores pueden estar relacionados:

• Flexbugs # 14 - El tamaño intrínseco de Chrome / Flexbox no se implementó correctamente.
• Error de Firefox 972595 : los contenedores flexibles deben usar "base flexible" en lugar de "ancho" para calcular los anchos intrínsecos de los elementos flexibles
• Chromium Issue 249112 : en Flexbox, permita relaciones de aspecto intrínsecas para informar el cálculo del tamaño principal.

Como solución alternativa, puede envolver cada uno <img>con a <div>o a <span>, o así.

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 Tamaño mínimo implícito de los elementos flexibles

Para proporcionar un tamaño mínimo predeterminado más razonable para los elementos flexibles , esta especificación introduce un nuevo valor automático como el valor inicial de las propiedades min-width y min-height definidas en CSS 2.1.

Alternativamente, puede usar el tablediseño CSS en su lugar, que obtendrá resultados similares ya flexboxque funcionará en más navegadores, incluso para IE8.

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

He estado jugando con flexbox últimamente y llegué a la solución a través de la experimentación y el siguiente razonamiento. Sin embargo, en realidad no estoy seguro de si esto es exactamente lo que sucede.

Si el ancho real se ve afectado por el sistema flexible. Entonces, después de que el ancho de los elementos alcanza el ancho máximo del padre, se ignora el ancho adicional establecido en css. Entonces es seguro establecer el ancho al 100%.

Dado que la altura de la etiqueta img se deriva de la propia imagen, establecer la altura en 0% podría hacer algo. (aquí es donde no tengo claro qué ... pero tenía sentido para mí que debería arreglarlo)

MANIFESTACIÓN

(¡recuerda que lo vi aquí primero!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

Funciona solo en Chrome todavía

Se espera este comportamiento. flex container estirará todos sus hijos de forma predeterminada. La imagen no tiene excepción. (es decir, el padre tendráalign-items: stretch propiedad)

Para mantener la relación de aspecto, tenemos dos soluciones:

1. Reemplace la align-items: stretchpropiedad predeterminada en align-items: flex-starto align-self: centeretc, http://jsfiddle.net/e394Lqnt/3/

o

2. Establezca la propiedad de alineación exclusivamente para el propio niño: me gusta, align-self: centero align-self: flex-startetc. http://jsfiddle.net/e394Lqnt/2/

En realidad, descubrí que el contenedor de la etiqueta de la imagen debe tener una altura para mantener la proporción de la imagen. por ejemplo>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

luego en su html su contenedor envolverá la imagen de la etiqueta

<div class="container"><img src="image.jpg" alt="image" /></div>

este trabajo para IE y otros navegadores

Solo tuve el mismo problema. Utilice la alineación flexible para centrar sus elementos. Necesita usar en align-items: centerlugar de align-content: center. Esto mantendrá la relación de aspecto, mientras que align-content no mantendrá la relación de aspecto.