Perché flexbox allunga la mia immagine piuttosto che mantenere le proporzioni?

156

Flexbox ha questo comportamento in cui allunga le immagini alla loro altezza naturale. In altre parole, se ho un contenitore flexbox con un'immagine figlio e ridimensiono la larghezza di quell'immagine, l'altezza non viene ridimensionata e l'immagine viene allungata.

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>

Espandi frammento

Cosa causa questo?

Ho aggiunto questo codice per dimostrare cosa intendo.

html css flexbox

— sjbuysse
fonte

5

In Firefox e IE funziona bene. In Chrome puoi sistemare con align-self:flex-start nell'immagine. Non so perché, forse il valore predefinito in Chrome è stretch.

2

Aggiungendo anche altezza: 100%; per l'img risolve il problema, vorrei sapere perché allunga anche l'immagine.

— Paran0a,

3

@blonfu, il valore predefinito in tutti i browser è align-items: stretch/ align-self: stretch. Se aggiungi un bordo attorno a ciascun elemento e lo rimuovi wrap, noterai che tutti gli elementi si estendono in tutti i browser: codepen.io/anon/pen/oLXBVx?editors=1100

— Michael Benjamin,

Ok, lo imparo, ma con le immagini funzionano diversamente su Chrome e sugli altri browser. Chrome non rispetta le proporzioni se non si definisce l'altezza.

@blonfu, Sì. Non c'è dubbio che ci siano incoerenze nel browser e livelli più granulari.

— Michael Benjamin,

365

Si sta allungando perché align-selfil valore predefinito è stretch. Imposta align-selfsu center.

align-self: center;

Vedi la documentazione qui: align-self

— pradeep1991singh
fonte

Sì, ma gli altri browser mantengono le proporzioni nelle immagini. Chrome non applica la base flessibile in img

9

Penso che align-self: start;possa essere una risposta più forte perché le immagini dovrebbero allinearsi verticalmente alla cima dei loro contenitori (non al centro) come farebbe qualsiasi immagine senza stile (no css). Ad ogni modo, entrambe le risposte risolvono l'allungamento. Quindi dipende da ciò che l'OP vuole ovviamente - semplicemente non ha avuto quell'impressione 'centrata verticalmente' dal post dell'OP.

— rospo

Se non si definisce una larghezza su un'immagine ed è in un contenitore flessibile, si allungherà al 100%. align-self: [flex-start, center...others]impedirà all'immagine di assumere il 100% della larghezza dei contenitori flessibili. align-self:centerlo risolve naturalmente, ma se vuoi che la tua immagine inizi dall'inizio o alla fine dell'uso del contenitorealign-items: flex-start or flex-end

— cacoder

1

Puoi anche mettere align-items: center(o qualunque allineamento si adatti alle tue esigenze) sul genitore.

— electrovir,

16

L'attributo chiave è 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>

Espandi frammento

— Dorian
fonte

1

Ho riscontrato lo stesso problema con un menu Foundation. align-self: center;non ha funzionato per me.

La mia soluzione era quella di avvolgere l'immagine con un <div style="display: inline-table;">...</div>

— isapir
fonte

2

Si tratta di flexbox però.

Questa è una soluzione per flexbox. L'immagine e il div sono all'interno di un contenitore flexbox.

— Isapir,

0

Aggiunta `margin`per allineare le immagini:

Dal momento che volevamo imageche fosse left-aligned, abbiamo aggiunto:

img {
  margin-right: auto;
}

Allo stesso modo per imageessere right-aligned, possiamo aggiungere margin-right: auto;. Lo snippet mostra una demo per entrambi i tipi di allineamento.

In bocca al lupo...

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>

Espandi frammento

— Akash
fonte

0

Si sta allungando perché il valore predefinito di auto-allineamento è allungato. Esistono due soluzioni per questo caso: 1. imposta img align-self: center OPPURE 2. imposta parent align-items: center

img {

   align-self: center
}

O

.genitore {
  align-items: center
}

— Mohamed Ali
fonte

Perché flexbox allunga la mia immagine piuttosto che mantenere le proporzioni?

Aggiunta marginper allineare le immagini:

Aggiunta `margin`per allineare le immagini: