Por que o flexbox estica minha imagem em vez de manter a proporção?

156

O Flexbox tem esse comportamento em que estende as imagens à sua altura natural. Em outras palavras, se eu tiver um contêiner flexbox com uma imagem filho e redimensionar a largura dessa imagem, a altura não será redimensionada e a imagem será esticada.

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}
<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>
Expandir snippet

O que causa isso?

Eu adicionei este CodePen para demonstrar o que quero dizer.

html css flexbox sjbuysse
fonte
5
No Firefox e IE funciona bem. No Chrome, você pode corrigir com align-self:flex-start a imagem. Não sei por que, talvez o valor padrão no chrome seja esticado.
2
Também adicionando altura: 100%; para o img corrige o problema, gostaria de saber por que ele também estende a imagem.
precisa saber é o seguinte
3
@blonfu, o valor padrão em todos os navegadores é align-items: stretch/ align-self: stretch. Se você adicionar uma borda em torno de cada item e remove wrap, você verá todos os itens esticar em todos os navegadores: codepen.io/anon/pen/oLXBVx?editors=1100
Michael Benjamin
Ok.Eu aprendo isso, mas as imagens funcionam de maneira diferente no Chrome e nos outros navegadores. O Chrome não respeita a proporção, se você não definir a altura.
@blonfu, sim. Não há dúvida de que existem inconsistências no navegador e níveis mais granulares.
Michael Benjamin

Respostas:

365

Está esticando porque align-selfo valor padrão é stretch. Defina align-selfcomo center.

align-self: center;

Consulte a documentação aqui: align-self

pradeep1991singh
fonte
Sim, mas os outros navegadores mantêm a proporção nas imagens. O Chrome nem aplica base flexível no img
9
Eu acho que align-self: start;pode ser uma resposta mais forte, porque as imagens devem se alinhar verticalmente ao TOPO de seus contêineres (não centralizados), como qualquer imagem sem estilo (sem CSS). De qualquer maneira, ambas as respostas corrigem o alongamento. Portanto, depende do que o OP deseja, é claro - apenas não recebeu essa impressão "centralizada verticalmente" no post do OP.
51118 toad
Se você não definir uma largura em uma imagem e ela estiver em um contêiner flexível, ela aumentará para 100%. align-self: [flex-start, center...others]impedirá que a imagem ocupe 100% da largura dos contêineres flexíveis. align-self:centerresolve o problema, é claro, mas se você quiser que sua imagem para começar a partir do início ou fim de uso recipientealign-items: flex-start or flex-end
cacoder
1
Você também pode colocar align-items: center(ou qualquer alinhamento adequado às suas necessidades) aos pais.
electrovir
16

O atributo-chave é align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}
<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>
Expandir snippet

Dorian
fonte
1

Eu enfrentei o mesmo problema com um menu da Fundação. align-self: center;não funcionou para mim.

Minha solução foi envolver a imagem com um <div style="display: inline-table;">...</div>

isapir
fonte
2
É sobre flexbox embora.
Esta é uma solução para o flexbox. A imagem e a div estão dentro de um contêiner flexbox.
isapir 03/01
0

Adicionando marginpara alinhar imagens:

Como queríamos imageque fosse left-aligned, adicionamos:

img {
  margin-right: auto;
}

Da mesma forma, para imageser right-aligned, podemos adicionar margin-right: auto;. O snippet mostra uma demonstração para os dois tipos de alinhamento.

Boa sorte...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}
<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>
Expandir snippet

Akash
fonte
0

Está esticando porque o valor padrão de alinhar-se é esticar. existem duas soluções para este caso: 1. configure img align-self: center OU 2. configure parent align-items: center

img {

   alinhar-se: centro
}

OU 

.parent {
  align-items: center
}
Mohamed Ali
fonte