Pourquoi flexbox étire-t-il mon image plutôt que de conserver le rapport hauteur/largeur ?

Question

Flexbox a ce comportement où il étire les images à leur hauteur naturelle. En d'autres termes, si j'ai un conteneur flexbox avec une image enfant, et que je redimensionne la largeur de cette image, la hauteur ne se redimensionne pas du tout et l'image est étirée.

div {
  display: flex; 
  flex-wrap: wrap;
}

img {
  width: 50%
}

    Titre
    Paragraphe

Qu'est-ce qui cause cela?

Answer 1

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

align-self: center;

Voir la documentation ici : align-self

Answer 2

La clé d'attribut est align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}

    Sans align-self:

    Avec align-self:

Answer 3

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

Ma solution a été d'envelopper l'image avec un

...

Answer 4

Ajouter marge pour aligner les images:

Comme nous voulions que l'image soit alignée à gauche, nous avons ajouté :

img {
  margin-right: auto;
}

De même pour que l'image soit alignée à droite, nous pouvons ajouter margin-right: auto;. L'extrait montre une démo 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;
}

  Boîte flexible

Answer 5

Utilisez display block pour l'image qui se trouve à l'intérieur d'un conteneur flex