En utilisant le modèle de boîte flexible CSS, comment puis-je forcer une image à conserver ses proportions?

JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/

Notez que les images s'étirent ou se rétrécissent afin de remplir la largeur du conteneur. C'est bien, mais pouvons-nous aussi l'étirer ou réduire la hauteur pour conserver les proportions de l'image?

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

Pour les balises img, si vous définissez un côté, l'autre côté est redimensionné pour conserver les proportions et, par défaut, les images se développent à leur taille d'origine.

En utilisant ce fait, si vous enveloppez chaque balise img dans une balise div et définissez sa largeur à 100% de la div parent, la hauteur sera en fonction du rapport hauteur / largeur souhaité.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

Pour empêcher les images de s'étirer dans les deux axes à l'intérieur d'un parent flex, j'ai trouvé quelques solutions.

Vous pouvez essayer d'utiliser object-fit sur l'image qui, par exemple

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Ou vous pouvez ajouter des règles flex-specfic qui peuvent mieux fonctionner dans certains cas.

align-self: center;
flex: 0 0 auto;

Pas besoin d'ajouter un div contenant.

La valeur par défaut de la propriété css "align-items" est "stretch", ce qui provoque l'étirement de vos images à sa hauteur d'origine. La définition de la propriété css "align-items" sur "flex-start" résout votre problème.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

La plupart des images avec des dimensions intrinsèques , c'est-à-dire une taille naturelle, comme une jpegimage. Si la taille spécifiée définit à la fois la largeur et la hauteur, la valeur manquante est déterminée en utilisant le rapport intrinsèque ... - voir MDN .

Mais cela ne fonctionne pas comme prévu si les images définies comme éléments flexibles directs avec le module de mise en page de boîte flexible actuel de niveau 1 , pour autant que je sache.

Consultez ces discussions et les rapports de bogue peuvent être liés:

• Flexbugs # 14 - Le dimensionnement intrinsèque de Chrome / Flexbox n'est pas implémenté correctement.
• Firefox Bogue 972595 - Les conteneurs Flex doivent utiliser "flex-base" au lieu de "width" pour calculer les largeurs intrinsèques des éléments flex
• Chromium Issue 249112 - Dans Flexbox, autorisez les proportions intrinsèques à informer le calcul de la taille principale.

Pour contourner ce problème, vous pouvez encapsuler chacun <img>avec un <div>ou un <span>, ou deux.

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 Taille minimale implicite des éléments flexibles

Pour fournir une taille minimale par défaut plus raisonnable pour les éléments flexibles , cette spécification introduit une nouvelle valeur automatique comme valeur initiale des propriétés min-width et min-height définies dans CSS 2.1.

Alternativement, vous pouvez utiliser la tablemise en page CSS à la place, ce qui vous donnera des résultats similaires car flexboxcela fonctionnera sur plus de navigateurs, même pour IE8.

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

J'ai joué avec flexbox ces derniers temps et j'en suis venu à une solution à travers l'expérimentation et le raisonnement suivant. Cependant, en réalité, je ne sais pas si c'est exactement ce qui se passe.

Si la largeur réelle est affectée par le système flex. Ainsi, une fois que la largeur des éléments a atteint la largeur maximale du parent, la largeur supplémentaire définie dans css est ignorée. Ensuite, il est prudent de définir la largeur à 100%.

Étant donné que la hauteur de la balise img est dérivée de l'image elle-même, régler la hauteur à 0% pourrait faire quelque chose. (c'est là que je ne sais pas quoi ... mais il me semblait logique que cela corrige le problème)

DEMO

(rappelez-vous l'avoir vu ici en premier!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

Fonctionne encore uniquement dans Chrome

Ce comportement est attendu. Le conteneur flex étendra tous ses enfants par défaut. L'image n'a pas d'exception. (c'est-à-dire que le parent aura la align-items: stretchpropriété)

Pour conserver les proportions, nous avons deux solutions:

1. Remplacez la align-items: stretchpropriété par défaut par align-items: flex-startou align-self: centeretc, http://jsfiddle.net/e394Lqnt/3/

ou

2. Définissez la propriété align exclusivement sur l'enfant lui-même: comme, align-self: center ou align-self: flex-startetc. http://jsfiddle.net/e394Lqnt/2/

En fait, j'ai découvert que le conteneur de la balise d'image doit avoir une hauteur pour conserver le rapport de l'image. par exemple>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

puis dans votre html votre conteneur emballera l'image de la balise

<div class="container"><img src="image.jpg" alt="image" /></div>

ce travail pour IE et d'autres navigateurs

J'ai juste eu le même problème. Utilisez l'alignement flex pour centrer vos éléments. Vous devez utiliser à la align-items: centerplace de align-content: center. Cela maintiendra le rapport hauteur / largeur, tandis que align-content ne conservera pas le rapport hauteur / largeur.