2
votes

Pourquoi height: auto ne fonctionne-t-il pas pour cette image?

J'ai un conteneur flexbox avec deux éléments flex dedans. L'un est une image et l'autre un paragraphe. J'ai essayé de redimensionner l'image proportionnellement en donnant width: some-pourcentage et height: auto mais ça ne fonctionne pas. Aidez-moi à résoudre ce problème.

<div class="item">
  <img
  src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
  <p>some paragraph</p>
</div>

.item{
  display:flex;
}
img{
  width: 25%; /* not working */
  height: auto;
}

Lien JSFiddle - https://jsfiddle.net/dizzyramen/xfot3Lwv/2 /

css flexbox

2 commentaires

utilisez align-self: flex-start sur l'image - cela se produit car stretch est le comportement par défaut ( align-items sur le conteneur flex ou align-self sur l ' élément flex ) ... voir jsfiddle.net/947uqszj

@kukkuz ça marche! Merci beaucoup

3 Réponses :

1
votes

voici une autre option:

enveloppez votre image dans un div et définissez la gestion de la largeur dans ce nœud.
asign largeur: 100%; height: auto; à img pour qu'il s'ajuste proportionnellement à son parent.


 Ici, vous l'avez dans un extrait. J'espère que ça aide. 
 
 

<div class="item">
    <div class="image-wrapper">
        <img
            src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
    </div>
    <p>some paragraph</p>
</div>

<style>
.item{
  display:flex;
}
.image-wrapper {
  width: 25%; /* means 25% of .item */
}
img{
  width: 100%; /* means 100% of its parent .image-wrapper */
  height: auto;
}
</style>

3 commentaires

Je pense avoir compris cette approche, mais pourquoi la largeur de .image-wrapper est-elle devenue si grande que vous deviez utiliser width: 25%?

Si vous ne définissez pas de largeur spécifique sur un div, par exemple .item , le div a un bloc d'affichage par défaut qui remplit tout l'espace horizontal.

Une partie importante de la question était pourquoi height: auto ne fonctionnait pas.

-2
votes

Cela se produit car, par défaut, la balise est en ligne. Vous devez le changer pour bloquer ou flex

2 commentaires

Sergio, vous ne pouvez pas contrôler la valeur display des éléments flex. Une fois que vous faites d'un élément un conteneur flex, la propriété display sur les éléments flex est contrôlée par l'algorithme flex. Les tentatives de définition d'une règle d'affichage sur les éléments flexibles sont ignorées par le navigateur. Ainsi, changer la valeur display de img en block ou flex n'aurait pas d'importance.

Voir le bas de ma réponse ici pour plus de détails: stackoverflow.com/a/52471797/3597276

2
votes

Un paramètre par défaut sur un conteneur flex est align-items: flex-start .

Dans un conteneur dans le sens des lignes, cela fait que les éléments flexibles, n'ayant pas de hauteur définie (par exemple height: auto ), étendent la hauteur totale du conteneur ( explication complète ).

Dans ce cas particulier, cependant, l'image s'étire au maximum et agrandit la taille du conteneur le long

La solution est de définir une limite de hauteur sur le conteneur ou de remplacer la valeur par défaut avec align-items: flex-start sur le conteneur ou align-self : flex-start sur l'élément.

Démo jsFiddle p>

<div class="item">
  <img src="https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg" />
  <p>some paragraph</p>
</div>

.item {
  display: flex;
}

img {
  width: 25%;
  align-self: start; /* new */
}

0 commentaires