eine Anfangseinstellung eines flexiblen Behälters align-items: stretch ist.
Das bedeutet, dass flex Artikel über den cross axis des Behälters erweitern.
In einem Zeilenrichtungs Behälter, wie in der Frage ist die Querachse senkrecht.
, dass die Elemente bedeutet (Bilder, in diesem Fall) die volle Höhe des Behälters abzudecken.
Wenn jedoch ein Biegepunkt eine definierte Quergröße aufweist, das überschreibt die stretch Standardeinstellung.
Vom spec:
8.3. Cross-axis Alignment: the align-items and align-self properties
Flex Elemente können in der Querachse der Stromlinie des flex Behälters, ähnlich wie justify-content aber in der dazu senkrechten Richtung ausgerichtet werden.
stretch
Wenn die Quer Leimeigenschaft des Flexpunkt berechnet zu auto und auto weder der Querachse Ränder sind, ist die Biegepunkt gereckt.
Dies ist der Schlüssel Sprache:
Wenn die Quer Leimeigenschaft des Flex Artikel zu auto
berechnet Und das ist, wie die Spezifikation „Quer Leimeigenschaft“ definiert:
Die Breite oder Höhe eines Flex-Elements, je nachdem, welches sich in der Dimension befindet, ist t er Artikel Kreuzgröße. Die Querformateigenschaft ist welche von width oder height die in der Querdimension ist.
https://www.w3.org/TR/css-flexbox-1/#cross-size-property
So erscheint Ihr Code Ausspielen zu werden, wie in der Spezifikation definiert.
Dies ist, was Sie haben:
.flex-parent {
display: flex;
max-height: 10vh;
}
<div class="flex-parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
<img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>
Das erste Bild hat keine definierte Breite (Hauptgröße) oder Höhe (Querformat), entweder in CSS oder HTML . Seine Kreuzgröße berechnet sich daher zu auto.
Diese Aussage:
Wenn die Quer Leimeigenschaft des Flex Artikel zu auto berechnet
... ist wahr, und align-items: stretch in Kraft tritt.
Das Bild wird über die Höhe des Containers, die 10px ist, erweitert.
Das zweite Bild hat jedoch eine explizite Dimensionierung. Die Cross-Größe ist im HTML definiert (height="240").
Nun ist diese Aussage:
Wenn die Quer Leimeigenschaft des Flex Artikel zu auto
... ist falsch und align-items: stretch wird berechnet außer Kraft gesetzt. Das Attribut HTML height hat Vorrang.
Zwei Anmerkungen auf das zweite Bild:
- Das Bild ignoriert die
max-height Grenze auf den Behälter, da eine anfängliche Einstellung in CSS overflow: visible ist. Die Attribute HTML width und height werden ihren jeweiligen CSS-Eigenschaften zugeordnet. Daher überschreibt height="240" die height: auto Standardeinstellung. Siehe unten für die spec Referenzen. *
Es gibt zwei weitere Aspekte zu berücksichtigen, wenn die Bilder in einem flexiblen Behälter zu machen.
Die Standard-Mindestgröße für Flex-Elemente. Mit dieser Einstellung wird verhindert, dass Flex-Objekte unter die Größe ihres Inhalts schrumpfen. Lesen Sie diesen Beitrag für weitere Informationen:
unterschiedliche Verhalten unter den großen Browsern. Firefox, Chrome, Safari, Edge und IE11 rendern Bilder nicht immer auf die gleiche Weise als Flex-Elemente. Lesen Sie diesen Beitrag für weitere Informationen:
Unter Berücksichtigung aller oben genannten Faktoren, hier ist meine vorgeschlagene Lösung:
.flex-parent {
display: flex;
max-height: 50vh; /* adjusted for demo */
}
.flex-parent {
min-width: 0;
}
img {
width: 100%;
height: auto;
}
<div class="flex-parent">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>
<div>
<img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>
</div>
* Die HTML-Attribute width und height werden ihren jeweiligen CSS-Eigenschaften zugeordnet. Wenn sie angegeben werden, überschreiben sie daher die CSS-Standardwerte.Von der HTML5-Spezifikation:
10.4.3 Attributes for embedded content and images
Die width und height Attribute auf applet, embed, iframe, object oder video Elemente und input Elemente mit einem type Attribute in der Bildschaltfläche Zustand und dass stellt entweder ein Bild dar oder das der Benutzer erwartet, wird schließlich ein Bild darstellen, ordnen Sie die Dimensionseigenschaftenwidth und height dem Element zu.
10.2 The CSS user agent style sheet and presentational hints
Wenn der Text sagt, unten, dass ein Attribut auf ein Element Karten auf die Dimension Eigenschaft (oder Objekte), bedeutet dies, dass, wenn das Element hat ein Attribut gesetzt, und das Parsen dieses Attribut den Wert die Verwendung der rules for parsing dimension values erzeugt keinen Fehler, dann wird erwartet, dass der Benutzer-Agent die geparste Dimension als Wert für eine presentational hint für Eigenschaften mit dem Wert als Pixellänge gegeben, wenn die Dimension eine ganze Zahl war, und mit Der Wert wird als Prozentsatz angegeben, wenn Dimension war ein Prozentsatz.
Sie haben 'max-height' dem übergeordneten div zugewiesen, weisen diese Höhe dem img-Tag zu 'flex-parent img: first-of-type' Ich habe 'first-of-type' verwendet, um nur das erste' img' zu bewirken. 2. Bild hat "Höhe" und "Breite", so dass es richtiges Seitenverhältnis aussieht, aber das erste ist Renderbreite ist nicht Seitenverhältnis – LKG
Sie können hier ein Beispiel sehen https://jsfiddle.net/Lokeshg27/tp53tv82/23/ – LKG