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

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 `margin`para 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

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

Adicionando marginpara alinhar imagens:

Adicionando `margin`para alinhar imagens: