Perché flexbox allunga la mia immagine?

Flexbox ha questo comportamento in cui estende le immagini alla loro altezza naturale. In altre parole (più specifiche), se ho un contenitore flexbox con un'immagine figlia e ridimensiono la larghezza di quell'immagine, l'altezza non viene ridimensionata affatto e l'immagine viene allungata.Perché flexbox allunga la mia immagine?

<div> 
    <img src="https://loremflickr.com/400/300" > 
    <h4>Appify</h4> 
    <p> some text </p> 
</div>

E questo foglio di stile

div { 
    display: flex; 
    flex-wrap: wrap; 
} 
img{ 
    width: 50% 
}

ho aggiunto This codepen di dimostrare quello che voglio dire. Che cosa causa questo?

fonte

2016-06-03 sjbuysse

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

Aggiunta anche altezza: 100%; a img risolve il problema, vorrei sapere perché estende anche l'immagine. – Paran0a

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

Si sta allungando perché il valore predefinito align-self è stretch. Impostare align-self a center.

align-self: center

See doc qui: align-self

fonte

2016-06-03 09:07:36 pradeep1991singh

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

Grazie mille, questo era il problema! –

la 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>

fonte

2017-04-10 19:14:24 Dorian

-1

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

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

fonte

2017-07-27 20:58:51 isapir

Perché flexbox allunga la mia immagine?

risposta

Problemi correlati