Un réglage de base d'un conteneur flex est - align-items: stretch.
Cela signifie que flex éléments s'étendre autour de l' axe transversal du conteneur.
Dans une rangée-direction conteneur, comme dans la question, la croix de l'axe est vertical.
Cela signifie que les éléments (images, dans ce cas) permettra de couvrir la totalité de la hauteur du conteneur.
Toutefois, lorsqu'un flex objet est défini de la croix de la taille, qui remplace l' stretch par défaut.
À partir de la spécification:
8.3. La croix-Alignement de l'axe: l' align-items et align-self
propriétés
Flex éléments peuvent être alignés dans l'axe transversal de la ligne actuelle de la
flex conteneur, comme justify-content mais dans la perpendiculaire
direction.
stretch
Si la croix de la taille de la propriété de l'flex item calcule auto, et
ni de la croix-axe marges auto, le flex de l'élément est
étiré.
C'est la clé de la langue:
Si la croix de la taille de la propriété de l'flex item calcule auto
Et c'est ainsi que la spécification définit la "croix de la taille de la propriété":
La largeur ou la hauteur d'un flex élément, celui qui est dans la croix
dimension, est l'élément de la croix de la taille. La croix de la taille de la propriétéest
selon la valeur de width ou height c'est dans la dimension transversale.
https://www.w3.org/TR/css-flexbox-1/#cross-size-property
De sorte que votre code s'affiche à jouer comme défini dans la spécification.
C'est ce que vous avez:
.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>
La première image n'a pas de largeur définie (taille principale) ou en hauteur (de la croix de la taille), soit dans le CSS ou le HTML. Sa croix de taille, donc, calcule auto.
Cette instruction:
Si la croix de la taille de la propriété de l'flex item calcule auto
... est vrai, et align-items: stretch entre en vigueur.
L'image s'étend sur la hauteur du conteneur, qui est 10px.
La deuxième image, cependant, a de dimensionnement explicite. La croix la taille est définie dans le code HTML (height="240").
Maintenant cette déclaration:
Si la croix de la taille de la propriété de l'flex item calcule auto
... est faux, et align-items: stretch est remplacée. Le HTML height attribut qui l'emporte.
Deux remarques à propos de la deuxième image:
- L'image ignore l'
max-height de la limite sur le récipient, car un réglage initial dans le CSS est - overflow: visible.
- Le HTML
width et height les attributs correspondent à leurs propriétés CSS. Par conséquent, height="240" remplace l' height: auto par défaut. Voir ci-dessous pour la spécification de référence.*
Il y a deux autres questions à considérer lors du rendu des images dans un conteneur flex.
-
La valeur par défaut de la taille minimum de flex éléments. Ce paramètre empêche flex éléments de réduction au-dessous de la taille de leur contenu. Lire cet article pour plus de détails:
-
Comportement variable parmi les principaux navigateurs. Firefox, Chrome, Safari, Edge et IE11 n'est pas toujours un rendu d'images flex éléments de la même manière. Lire cet article pour plus de détails:
Compte tenu de tous les facteurs ci-dessus, voici ma solution suggérée:
.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>
*Le HTML width et height les attributs correspondent à leurs propriétés CSS. Par conséquent, lorsque spécifié, elles remplacent les CSS par défaut. À partir de la spec HTML5:
10.4.3 les Attributs de contenu intégré et
images
L' width et height attributs applet, embed, iframe,
object ou video - éléments, et input éléments type
attribut dans le Bouton Image de l'état et qui représente un
l'image que l'utilisateur s'attend à ce finira par représenter une image,
carte de la dimension propriétés width et height sur l'élément, respectivement.
10.2 Le CSS de l'agent utilisateur de la feuille de style et de présentation
conseils
Lorsque le texte ci-dessous est dit qu'un attribut d'un élément de cartes à l'
dimension de la propriété (ou propriétés), cela signifie que si l'élément a
un ensemble d'attributs et d'analyse que la valeur de l'attribut en utilisant les règles
pour l'analyse de la dimension
les valeurs ne génère pas une erreur, alors l'agent utilisateur devrait utiliser le
analysée à la dimension de la valeur pour une présentation de l'indicede
propriétés, avec la valeur d'un pixel de longueur si la dimension
est un entier, et avec la valeur donnée en pourcentage si l'
dimension a été un pourcentage.
