Pourquoi la flexbox étire-t-elle mon image au lieu de conserver les proportions?

158

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%
}

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

Développer l'extrait

Qu'est-ce qui cause cela?

J'ai ajouté This CodePen pour démontrer ce que je veux dire.

html css flexbox

— sjbuysse
source

5

Dans Firefox et IE fonctionne très bien. Dans Chrome, vous pouvez corriger avec align-self:flex-start dans l'image. Je ne sais pas pourquoi, peut-être que la valeur par défaut dans Chrome est stretch.

2

Ajout également de la hauteur: 100%; à l'img résout le problème, je voudrais savoir pourquoi cela étire l'image aussi.

— Paran0a

3

@blonfu, la valeur par défaut dans tous les navigateurs est align-items: stretch/ align-self: stretch. Si vous ajoutez une bordure autour de chaque élément et supprimez wrap, vous remarquerez que tous les éléments s'étirent dans tous les navigateurs: codepen.io/anon/pen/oLXBVx?editors=1100

— Michael Benjamin

Ok, j'apprends cela mais avec les images fonctionnent différemment dans Chrome et les autres navigateurs. Chrome ne respecte pas les proportions si vous ne définissez pas la hauteur.

@blonfu, oui. Il ne fait aucun doute qu'il existe des incohérences dans le navigateur et des niveaux plus granulaires.

— Michael Benjamin

367

Il est extensible car la align-selfvaleur par défaut est stretch. Réglez align-selfsur center.

align-self: center;

Voir la documentation ici: align-self

— pradeep1991singh
source

Oui, mais les autres navigateurs conservent le rapport hauteur / largeur dans les images. Chrome ni applique flex-base dans img

9

Je pense que align-self: start;peut être une réponse plus forte car les images doivent s'aligner verticalement sur le HAUT de leurs conteneurs (pas au centre) comme n'importe quelle image sans style (pas de css) le ferait. Dans tous les cas, les deux réponses corrigent l'étirement. Cela dépend donc de ce que OP veut bien sûr - je n'ai tout simplement pas eu cette impression «centrée verticalement» du message d'OP.

— crapaud

Si vous ne définissez pas de largeur sur une image et qu'elle se trouve dans un conteneur flexible, elle s'étendra à 100%. align-self: [flex-start, center...others]empêchera l'image de prendre 100% de la largeur des conteneurs flexibles. align-self:centerle corrige bien sûr, mais si vous voulez que votre image commence au début ou à la fin de l'utilisation du conteneuralign-items: flex-start or flex-end

— cacoder

1

Vous pouvez également mettre align-items: center(ou tout autre alignement qui correspond à vos besoins) sur le parent.

— electrovir

16

L'attribut 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>

Développer l'extrait

— Dorian
source

1

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

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

— isapir
source

2

Il s'agit cependant de flexbox.

C'est une solution pour FlexBox. L'image et le div sont à l'intérieur d'un conteneur flexbox.

— isapir le

0

Ajout `margin`pour aligner les images:

Puisque nous voulions que le imagesoit left-aligned, nous avons ajouté:

img {
  margin-right: auto;
}

De même pour imageêtre 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>

Développer l'extrait

— Akash
source

0

Il est étirement parce que la valeur par défaut de align-self est stretch. il y a deux solutions pour ce cas: 1. set img align-self: center OU 2. set parent align-items: center

img {

   align-self: centre
}

OU

.parent {
  align-items: centre
}

— Mohamed Ali
source

Pourquoi la flexbox étire-t-elle mon image au lieu de conserver les proportions?

Ajout marginpour aligner les images:

Ajout `margin`pour aligner les images: