Pflegen Bild-Seitenverhältnis beim ändern der Höhe

Verwendung der CSS-flex-box-Modell, wie kann ich die Kraft, ein Bild zu halten sein Seitenverhältnis?

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

Beachten Sie, dass die Bilder vergrößern oder verkleinern, um zu füllen die Breite des Containers. Das ist in Ordnung, aber können wir auch haben, Sie zu dehnen oder schrumpfen die Höhe pflegen die Bild-Proportionen?

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;
}
  • Soweit ich weiß, die beste Lösung ist die Verwendung eines <div> mit der CSS - background-image: url(...);background-size:contain; background-repeat:no-repeat
  • Es gibt einige interessante leads hier, aber was ist, wenn die Bilder nicht schon das gleiche Verhältnis? Hinzufügen und "extra" div, ist das Letzte, was wir brauchen, zu kümmern. Warum nicht ein test-Fall wie diesem stattdessen: jsfiddle.net/sheriffderek/999Lg9qv
InformationsquelleAutor coderMe | 2015-06-11
Schreibe einen Kommentar