Warum streckt Flexbox mein Bild?

Flexbox hat dieses Verhalten, wenn Bilder auf ihre natürliche Höhe gedehnt werden. Wenn ich einen Flexbox-Container mit einem Child-Bild habe und die Breite des Bildes verändere, ändert sich die Höhe in anderen (spezifischeren) Wörtern überhaupt nicht und das Bild wird gestreckt.Warum streckt Flexbox mein Bild?

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

Und das Sheet

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

habe ich This codepen zu zeigen, was ich meine. Was verursacht das?

Quelle

2016-06-03 sjbuysse

In Firefox und IE funktioniert gut zu wickeln. In Chrome können Sie mit 'align-self: flex-start' im Bild korrigieren. Ich weiß nicht warum, vielleicht ist der Standardwert in Chrome dehnbar. – blonfu

Auch hinzufügen Höhe: 100%; um den img behebt das Problem, ich würde gerne wissen, warum es das Bild auch streckt. – Paran0a

@blonfu, der Standardwert in allen Browsern ist 'align-items: stretch' /' align-self: stretch'. Wenn Sie einen Rahmen um jedes Element hinzufügen und "Umbruch" entfernen, werden Sie feststellen, dass alle Elemente in allen Browsern gestreckt sind: http://codepen.io/anon/pen/oLXBVx?editors=1100 –

Es dehnt sich aus, weil align-self Standardwert stretch ist. Set align-self zu center.

align-self: center

See doc hier: align-self

Quelle

2016-06-03 09:07:36 pradeep1991singh

Ja, aber die anderen Browser behalten das Seitenverhältnis in den Bildern bei. Chrome noch gilt Flex-Basis in img – blonfu

Vielen Dank, das war das Problem! –

Der Schlüssel ist 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>

Quelle

2017-04-10 19:14:24 Dorian

-1

stand ich das gleiche Problem mit einem Menü-Stiftung. align-self: center; hat nicht für mich funktioniert.

Meine Lösung war, das Bild mit einem <div style="display: inline-table;">...</div>

Quelle

2017-07-27 20:58:51 isapir

Warum streckt Flexbox mein Bild?

Antwort

Verwandte Themen