html - column - Mantener la relación de aspecto de la imagen al cambiar la altura

flex-wrap

Question

Usando el modelo de caja flexible CSS, ¿cómo puedo forzar a 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. Eso está bien, pero ¿podemos hacer que también estire o reduzca 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;
}

Answer 1

La mayoría de las imágenes con dimensiones intrínsecas , que es un tamaño natural, como una imagen jpeg . Si el tamaño especificado define uno de los dos, el ancho y el alto, el valor faltante se determina utilizando la relación intrínseca ... - vea MDN .

Pero eso no funciona como se esperaba si las imágenes que se están configurando como elementos flexibles directos con el Módulo de diseño de caja flexible actual Nivel 1 , que yo sepa.

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

• Flexbugs # 14 - El tamaño intrínseco de Chrome / Flexbox no se implementó correctamente.
• Firefox Bug 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 que las relaciones de aspecto intrínsecas informen el cálculo del tamaño principal.

Como solución alternativa, puede ajustar cada <img> con un <div> o un <span> , más o menos.

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 artículos flexibles

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

Alternativamente, puede usar el diseño de la table CSS, que obtendrá resultados similares a los de flexbox , 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>

Answer 2

Últimamente he estado jugando con Flexbox y llegué a una solución para esto 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 imagen en sí misma, 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 solucionarlo)

DEMO

(¡recuerda haberlo visto aquí primero!)

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

Funciona solo en cromo todavía

Answer 3

Acabo de tener el mismo problema. Use la alineación flexible para centrar sus elementos. Debe usar align-items: center lugar de align-content: center . Esto mantendrá la relación de aspecto, mientras que el contenido de alineación no mantendrá la relación de aspecto.

Answer 4

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;}

entonces en tu html tu contenedor envolverá la imagen de la etiqueta

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

este trabajo para IE y otros navegadores

Answer 5

Este comportamiento es esperado. flex container estirará a todos sus elementos secundarios de forma predeterminada. La imagen no tiene excepción. (es decir, el padre tendrá align-items: stretch propiedad de align-items: stretch )

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

1. Reemplace los elementos de align-items: stretch predeterminados align-items: stretch propiedad de align-items: stretch para align-items: flex-start o align-self: center , etc., http://jsfiddle.net/e394Lqnt/3/

o

2. Establezca la propiedad de alineación exclusivamente para el propio hijo: like, align-self: center o align-self: flex-start etc. http://jsfiddle.net/e394Lqnt/2/

Answer 6

No es necesario agregar un div que contenga.

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

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

Answer 7

Para evitar que las imágenes se estiren en cualquier eje 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 flex-specfic que pueden funcionar mejor en algunos casos.

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

Answer 8

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 una etiqueta div y establece su ancho al 100% del div primario, la altura se ajustará a la relación de aspecto que desee.

http://jsfiddle.net/0o5tpbxg/

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