web-dev-qa-db-fra.com

Pourquoi flexbox étire mon image?

Flexbox a ce comportement lorsqu'il étend les images à leur hauteur naturelle. En d'autres termes (plus spécifiques), si j'ai un conteneur flexbox avec une image enfant et que je redimensionne la largeur de cette image, la hauteur ne sera pas redimensionnée du tout et l'image sera étirée.

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

Et cette feuille de style

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

J'ai ajouté This codepen pour montrer ce que je veux dire. Qu'est-ce qui cause ça?

htmlcssflexbox
117
sjbuysse

Il s'étire parce que align-self par défaut est stretch. Définissez align-self sur center.

align-self: center

Voir doc ici: align-self

278
pradeep1991singh

La clé est 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>
13
Dorian

J'ai rencontré le même problème avec un menu Foundation. align-self: center; n'a pas fonctionné pour moi.

Ma solution consistait à envelopper l'image avec un <div style="display: inline-table;">...</div>

1
isapir

Ajout de margin pour aligner les images:

Puisque nous voulions que la image soit left-aligned, nous avons ajouté:

img {
  margin-right: auto;
}

De même, pour que image soit right-aligned, nous pouvons ajouter margin-right: auto;. L'extrait montre une démonstration pour les deux types d'alignement.

Bonne chance...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}
<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>
0
Akash

utiliser le bloc d'affichage pour l'image existante dans le conteneur flex

0
Mohamed Abo Elmagd