Utilizzando il modello CSS flex box, come posso forzare un'immagine a mantenere le sue proporzioni?

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

Notare che le immagini si allungano o si restringono per riempire la larghezza del contenitore. Va bene, ma possiamo anche allungare o restringere l' altezza per mantenere le proporzioni dell'immagine?

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

Per i tag img, se si definisce un lato, l'altro lato viene ridimensionato per mantenere le proporzioni e per impostazione predefinita le immagini si espandono alla loro dimensione originale.

Usando questo fatto se avvolgi ogni tag img nel tag div e imposti la sua larghezza al 100% del div genitore, l'altezza sarà in base alle proporzioni desiderate.

http://jsfiddle.net/0o5tpbxg/

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

Per evitare che le immagini si allunghino su entrambi gli assi all'interno di un genitore flessibile, ho trovato un paio di soluzioni.

Puoi provare a utilizzare l'adattamento all'oggetto sull'immagine che, ad es

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Oppure puoi aggiungere regole specifiche di flessibilità che potrebbero funzionare meglio in alcuni casi.

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

Non è necessario aggiungere un div contenitore.

L'impostazione predefinita per la proprietà css "align-items" è "stretch", che è ciò che causa l'allungamento delle immagini alla sua altezza originale completa. L'impostazione della proprietà css "align-items" su "flex-start" risolve il problema.

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

La maggior parte delle immagini con dimensioni intrinseche , cioè una dimensione naturale, come jpegun'immagine. Se la dimensione specificata definisce sia la larghezza che l'altezza, il valore mancante viene determinato utilizzando il rapporto intrinseco ... - vedere MDN .

Ma ciò non funziona come previsto se le immagini che vengono impostate come elementi flessibili diretti con l'attuale modulo di layout a scatola flessibile di livello 1 , per quanto ne so.

Vedi queste discussioni e le segnalazioni di bug potrebbero essere correlate:

• Flexbugs # 14 - Dimensionamento intrinseco di Chrome / Flexbox non implementato correttamente.
• Bug di Firefox 972595 - I contenitori flessibili dovrebbero utilizzare "base flessibile" invece di "larghezza" per calcolare le larghezze intrinseche degli elementi flessibili
• Chromium Problema 249112 - In Flexbox, consenti proporzioni intrinseche per informare il calcolo della dimensione principale.

Come soluzione alternativa, puoi racchiudere ciascuno <img>di essi con a <div>o a <span>, o giù di lì.

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 Dimensione minima implicita degli articoli flessibili

Per fornire una dimensione minima predefinita più ragionevole per gli elementi flessibili , questa specifica introduce un nuovo valore automatico come valore iniziale delle proprietà min-width e min-height definite nei CSS 2.1.

In alternativa, puoi utilizzare tableinvece il layout CSS , che otterrai risultati simili in flexboxquanto funzionerà su più browser, anche per 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>

Ultimamente ho giocato a flexbox e sono arrivato alla soluzione per questo attraverso la sperimentazione e il seguente ragionamento. Tuttavia, in realtà non sono sicuro che sia esattamente ciò che accade.

Se la larghezza reale è influenzata dal sistema flessibile. Quindi, dopo che la larghezza degli elementi ha raggiunto la larghezza massima del genitore, la larghezza extra impostata in css viene ignorata. Quindi è sicuro impostare la larghezza al 100%.

Poiché l'altezza del tag img è derivata dall'immagine stessa, impostare l'altezza su 0% potrebbe fare qualcosa. (qui è dove non sono chiaro su cosa ... ma per me aveva senso che dovesse risolverlo)

DEMO

(ricorda di averlo visto qui prima!)

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

Funziona solo in Chrome ancora

Questo comportamento è previsto. flex container estenderà tutti i suoi figli per impostazione predefinita. L'immagine non fa eccezione. (cioè, il genitore avrà la align-items: stretchproprietà)

Per mantenere le proporzioni abbiamo due soluzioni:

1. Sostituisci la align-items: stretchproprietà predefinita in align-items: flex-starto align-self: centerecc., Http://jsfiddle.net/e394Lqnt/3/

o

2. Imposta la proprietà align esclusivamente sul figlio stesso: like, align-self: centero align-self: flex-startecc. Http://jsfiddle.net/e394Lqnt/2/

In realtà ho scoperto che il contenitore del tag immagine deve avere un'altezza per mantenere il rapporto dell'immagine. ad esempio>

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

quindi nel tuo html il tuo contenitore avvolgerà l'immagine del tag

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

questo funziona per IE e altri browser

Ho appena avuto lo stesso problema. Usa l'allineamento flessibile per centrare i tuoi elementi. Devi usare align-items: centerinvece di align-content: center. Ciò manterrà le proporzioni, mentre align-content non manterrà le proporzioni.