Usando o modelo CSS flex box, como posso forçar uma imagem a manter sua proporção?

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

Observe que as imagens aumentam ou diminuem para preencher a largura do contêiner. Tudo bem, mas também podemos esticar ou diminuir a altura para manter as proporções da imagem?

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 tags img, se você definir um lado, o outro lado será redimensionado para manter a proporção e, por padrão, as imagens serão expandidas para seu tamanho original.

Usando esse fato, se você envolver cada tag img na tag div e definir sua largura para 100% do div pai, a altura ficará de acordo com a proporção desejada.

http://jsfiddle.net/0o5tpbxg/

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

Para evitar que as imagens se estendam em qualquer um dos eixos dentro de um pai flexível, encontrei algumas soluções.

Você pode tentar usar ajuste de objeto na imagem que, por exemplo

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Ou você pode adicionar regras flex-specfic que podem funcionar melhor em alguns casos.

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

Não há necessidade de adicionar um div contendo.

O padrão para a propriedade css "align-items" é "stretch" que é o que está fazendo com que suas imagens sejam esticadas até sua altura original. Definir a propriedade css "align-items" para "flex-start" corrige o problema.

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

A maioria das imagens com dimensões intrínsecas , ou seja, um tamanho natural, como uma jpegimagem. Se o tamanho especificado definir tanto a largura quanto a altura, o valor ausente é determinado usando a proporção intrínseca ... - consulte MDN .

Mas isso não funciona como esperado se as imagens que estão sendo definidas como itens flexíveis diretos com o Módulo de Layout de Caixa Flexível atual Nível 1 , até onde eu sei.

Veja essas discussões e os relatórios de bugs podem estar relacionados:

• Flexbugs # 14 - Dimensionamento intrínseco do Chrome / Flexbox não implementado corretamente.
• Firefox Bug 972595 - Flex containers devem usar "flex-basis" ao invés de "width" para calcular larguras intrínsecas de flex items
• Chromium Issue 249112 - No Flexbox , permite relações de aspecto intrínsecas para informar o cálculo do tamanho principal.

Como solução alternativa, você pode envolver cada <img>um com um <div>ou um <span>ou assim.

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 Tamanho mínimo implícito de itens flexíveis

Para fornecer um tamanho mínimo padrão mais razoável para itens flexíveis , esta especificação apresenta um novo valor auto como o valor inicial das propriedades min-width e min-height definidas no CSS 2.1.

Como alternativa, você pode usar o tablelayout CSS , no qual obterá resultados semelhantes flexbox, pois funcionará em mais navegadores, até mesmo para o 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>

Tenho brincado com o flexbox ultimamente e cheguei a uma solução para isso através da experimentação e do seguinte raciocínio. No entanto, na realidade, não tenho certeza se isso é exatamente o que acontece.

Se a largura real for afetada pelo sistema flexível. Assim, após a largura dos elementos atingir a largura máxima do pai, a largura extra definida no css é ignorada. Então é seguro definir a largura para 100%.

Como a altura da tag img é derivada da própria imagem, definir a altura como 0% pode fazer algo. (é aqui que eu não estou certo sobre o quê ... mas fazia sentido para mim que deveria consertar)

DEMO

(lembre-se de ter visto aqui primeiro!)

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

Funciona apenas em cromo ainda

Esse comportamento é esperado. flex container estenderá todos os seus filhos por padrão. A imagem não tem exceção. (ou seja, o pai terá align-items: stretchpropriedade)

Para manter a proporção da imagem, temos duas soluções:

1. Substitua a align-items: stretchpropriedade padrão por align-items: flex-startou align-self: centeretc, http://jsfiddle.net/e394Lqnt/3/

ou

2. Defina a propriedade de alinhamento exclusivamente para o próprio filho: like, align-self: centerou align-self: flex-startetc. http://jsfiddle.net/e394Lqnt/2/

Na verdade descobri que o container da tag da imagem precisa ter uma altura para manter a proporção da imagem. por exemplo>

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

então, em seu html, seu contêiner envolverá a imagem da tag

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

isso funciona para o IE e outros navegadores

Eu simplesmente tive o mesmo problema. Use o alinhamento flexível para centralizar seus elementos. Você precisa usar em align-items: centervez de align-content: center. Isso manterá a proporção de aspecto, enquanto o alinhamento de conteúdo não manterá a proporção de aspecto.