Je me demande pourquoi Emballage Voici quelques éléments html: p> p > img code> flex dans div code> S va les mettre à échelle correctement mais img code> IMG Si vous consultez Ce jsfiddle , vous verrez que l'enveloppement d'une image dans une div Travaillez comme suggéré par d'autres messages sur Stackoverflow, mais cela ne semble pas fonctionner autrement. Et align-auto code> ne change rien comme suggéré ici . J'ai essayé de Align-items code> de sorte qu'il remplacerait le tronçon par défaut code> mais cela ne fonctionne pas. J'ai également essayé de nettoyer le min-hauteur code> et min-largeur code> car ceux-ci sont définis par défaut sur auto code>. Cette Réponse justifie à l'aide de l'emballage div code> sauf qu'il n'explique pas pourquoi em> il fonctionne pour div (code> flexbox éléments et non pour img code> directement. p>
<div class="stack">
<div class="test">
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<!--Wrapping in a div works-->
</div>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>
3 Réponses :
avec CSS Flexbox , vous devez Adressez l'élément enfant directement à partir d'un parent d'emballage.
Dans votre exemple, afin d'empêcher une structure répétée vous devez appliquer une classe (comme dans votre exemple) à l'image que vous pouvez. p> p> code>, vous venez de supprimer div> .
<body>
<div class="stack">
<img class="test" src="http://picsum.photos/200/200" />
<img class="test" src="http://picsum.photos/200/200" />
<img class="test" src="http://picsum.photos/200/200" />
<img class="test" src="http://picsum.photos/200/200" />
<img class="test" src="http://picsum.photos/200/200" />
<img class="test" src="http://picsum.photos/200/200" />
</div>
</body>
Merci pour votre réponse! Cependant, je veux qu'ils puissent que toutes les échelles soient le rapport qualité-prix correct. À l'heure actuelle, ils sont étirés verticalement.
@ RB612 Je ne comprends pas, les images de taille d'origine 200px sont correctement mise à l'échelle à 100px x 100px pour s'adapter au conteneur 600px DIV? J'ai ajouté une bordure au conteneur div auprès de l'extrait d'illustrer ...
Bonjour @vickel, je suis sur chrome qu'il ressemble à Ce . Il est étiré verticalement. Voyez-vous quelque chose de différent?
J'ai mis à jour le snippet et ajouté largeur: 200px; au style IMG, alors cela fonctionne également en chrome
Est-ce que cela fait ce dont vous avez besoin?
Marquage: p>
.stack {
display:flex;
}
.stack img {
align-self:center;
width: 100px;
}
Merci @mchat! C'est si proche. En raison de votre réponse, j'ai réalisé que c'était beaucoup plus simple que je ne le faisais. Tout ce que je devais faire était d'ajouter min-largeur: 0 lui permet de rétrécir la taille du conteneur, ce qui le rend plus réactif (voir ici ). Juste curieux, pourquoi ajoute-t-il que la règle la largeur cause la ne pas s'étirer verticalement? Être très nouveau à FLEXBOX, je veux juste comprendre pourquoi ajouter certaines règles le causer de manière différente.
Les images n'étiraient pas verticalement ... ils se seraient pressés horizontalement. Largeur: auto est la valeur par défaut de la propriété . Il a permis de s'adapter à vos images à la largeur du conteneur Flex. Votre conteneur (parent de 600px de large) n'était pas aussi large que les images (à 200px chacun, 1200px Total.) Largeur: auto les a causés à s'insérer pour y aller. En définissant la propriété largeur sur n'importe quelle valeur du tout, nous remplacons le paramètre par défaut auto qui l'empêche d'essayer d'écraser vos images.
CSS est un voyage ... Prenez Solace dans ce Animation .
ah je vois haha. J'apprécie votre persistance alors que j'ai essayé d'articuler le problème que j'avais!
Les images sont étirées car la valeur par défaut d'align-auto est "stretch". Pour maintenir un rapport d'aspect, définissez Soi Align-Self vers 'Center'. J'ai mis à jour votre extrait de code pour le démontrer.
Veuillez garder à l'esprit que vous avez 5 images à 200px Largeur et que votre largeur de conteneur est définie comme 600px, affichant ainsi les images correctement à 200 x200 entraîne l'affichage du conteneur d'afficher une barre de défilement horizontale. P>
S'il vous plaît voir ceci. Stackoverflow Question: Pourquoi Flexbox étire-t-elle mon image? P>
p>
<div class="stack">
<div class="test">
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<!--Wrapping in a div works-->
</div>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>Bonjour Kenny, merci beaucoup pour ça! Malheureusement, ce n'est pas tout à fait ce que je cherchais depuis que je voulais, je voulais rétrécir à la taille du conteneur (voir ici ).
L'image n'est plus l'élément Flex, maintenant c'est la DIV. Donc, toute propriété Flex ne l'affecte pas. Il va se comporter un élément inline à l'intérieur de la div
@Tmaniafif sauf le
div entoure l'image directement - il n'est pas étiré à la hauteur. Voir ici . De plus, si vous définissez l'image pour êtreAffichage: Bloc; Vous obtenez toujours des résultats attendus.Cela n'a rien à voir avec Flexbox, c'est parce que l'image générer des espaces en fonction de celui-ci en raison d'un élément inline ( Stackoverflow.com/Questtions/5804256/... )
@Tmaniafif, ah oui je comprends. Je voulais dire que je ne vois pas pourquoi cela importerait si l'élément Flex est un div ou une image. Si cela fonctionne lorsque l'image est affichée sous forme de bloc à l'intérieur d'une div, pourquoi avons-nous besoin de la DIV?
parce qu'un div n'est pas identique à une image. C'est trivial que vous verrez un comportement différent. Pensez que si vous changez l'image avec
entrée ,svg ,Toile , etc. Tous sont différents, donc vous voyez logiquement un comportement différent. une image à l'intérieur d'une DIV qui est un élément flexible est totalement différente d'une image à l'intérieur d'un conteneur Flex et est un élément flexible@Tmaniafif C'est vrai, mais je pensais qu'il pourrait y avoir une règle générale sur les articles Flex et leur rapport taille / aspect. Je penserais que au moins utiliser
align-items etmin-width permettrait de ne pas avoir à utiliser undiv wrapper, non?Je ne peux pas dire ce que votre violon tente de prouver ... Les propriétés que vous postulez aux éléments Flex et aux images ne sont pas cohérentes. Je pense que vous constaterez que
Affichage: Flex élément.
@MChat J'essaie de prouver que le seul moyen (en plus de faire un objet d'objet) pour obtenir l'image de conserver son rapport d'image en tant qu'élément Flexbox se fait par l'enveloppe dans une DIV. De plus, assez, assez, la DIV elle-même n'est pas étirée à la hauteur de l'image, qui peut être démontrée en ajoutant une bordure autour de la DIV enfermant la première image. Donc, j'essaie de montrer que de ce que je vois, cela pour une raison quelconque, je ne peux que récupérer l'image de ne pas s'étirer si j'utilise une div.
Dans votre exemple, vous n'appliquez pas les mêmes propriétés à la DIV et aux images. Bien sûr, ils ne se comporteront pas de la même manière. Placez les propriétés que vous appliquez sur les images Flex-Item sur la div Flex-Item Div et elle s'étendra exactement comme elles le font.
De plus, vous n'avez pas précisé ce que votre objectif de fin est pour cet exercice, ce qui rend difficile pour quiconque de poster une solution.
@Mchat désolé pour ça, tu as raison que j'aurais dû être plus clair sur mon but final. Mon objectif final est d'avoir Ceci mais sans avoir chacun d'entre eux enveloppé dans un
div < / code>. Et j'essaie juste d'expliquer que cela ne semble pas possible sans avoir cette enveloppediv .