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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Für img-tags, wenn Sie definieren eine Seite, dann andere Seite wird angepasst, um "Seitenverhältnis beibehalten" und von Standard-Bildern zu erweitern, um Ihre ursprüngliche Größe.
Mit dieser Tat, wenn Sie wickeln Sie jedes img-tag in den div-tag und seine Breite auf 100% des übergeordneten div anschließend die Höhe wird je nach Seitenverhältnis, wie man wollte.
http://jsfiddle.net/0o5tpbxg/
Zu halten Bilder von stretching in beide Achsen innerhalb einer flex-Muttergesellschaft, die ich gefunden habe ein paar Lösungen.
Können Sie versuchen, mit Objekt-fit auf dem Bild, die z.B.
http://jsfiddle.net/ykw3sfjd/
Oder fügen Sie flex-spezifisch Regeln, die vielleicht besser funktionieren, in einigen Fällen.
object-fit: contain;
hat den trick für mich, wenn ich hatte nur das problem in chrome, ff war in Ordnung.object-fit:contain
undalign-self: center; flex: 0 0 auto;
besser funktioniert als Einstellung img width mit :width: 100%;
weil Bild mit und Höhe sind immer noch im Verhältnis.Keine Notwendigkeit, fügen Sie eine mit div.
Standard für die css "align-items" Eigenschaft "stretch", das ist, was die Ursache Ihrer Bilder werden gestreckt, um seine volle ursprüngliche Höhe. Die Einstellung der css "align-items" - Eigenschaft auf "flex-start" behebt dein Problem.
Aber das funktioniert nicht, wie erwartet, wenn die Bilder festgelegt, die als direkte flex-Elemente mit dem aktuellen Flexible Box Layout Module Level 1, soweit ich weiß.
Sehen diese Diskussionen und bug-Berichte können bezogen werden:
Als workaround könnten Sie wickeln Sie jeden
<img>
mit einem<div>
oder eine<span>
oder so.jsFiddle
CSS:
HTML:
Alternativ können Sie die CSS -
table
layout statt, erhalten Sie ähnliche Ergebnisse wieflexbox
es wird die Arbeit auf mehr Browsern, auch für den IE8.jsFiddle
CSS:
HTML:
.slider > div{min-width:0}
auf neue Browser, die das unterstützenmin-width: auto
.auto
Wert als Standardwert fürmin-width
undmin-height
(vorher war es0
). Chrome nicht implementiert es doch, so Ihre erste snippet funktioniert. Aber der neue Browser benötigen, um zu erlauben, dass der flex-Elemente zu verkleinern, die kleiner als die Standardbreite der Bilder.Ich habe das Spiel flexbox in letzter Zeit und ich kam zu der Lösung für dieses durch Experimentieren und der folgenden Argumentation. In Wirklichkeit jedoch bin ich mir nicht sicher, ob dies genau das ist, was passiert.
Wenn tatsächliche Breite betroffen ist-flex-system. So nach der Breite der Elemente hit-max Breite des Eltern Sie extra Breite einstellen in css wird ignoriert. Dann ist es sicher, legen Sie die Breite auf 100%.
Da die Höhe der img-tag ist abgeleitet vom Bild selbst dann die Einstellung der Höhe zu 0% etwas tun könnte. (dies ist, wo ich bin unklar, was...aber es machte Sinn für mich, die es beheben sollte)
DEMO
(denken Sie daran, sah es hier zuerst!)
Funktioniert nur in chrome noch
auto
". Das ist, was passiert auf Firefox.Dieses Verhalten wird erwartet. flex-container wird stretch alle seine Kinder standardmäßig. Image keine Ausnahme. (ie, Eltern haben
align-items: stretch
Eigenschaft )Halten das Seitenverhältnis, haben wir zwei Lösungen:
align-items: stretch
Eigenschaftalign-items: flex-start
oderalign-self: center
etc,http://jsfiddle.net/e394Lqnt/3/
oder
align-self: center
oderalign-self: flex-start
etc.http://jsfiddle.net/e394Lqnt/2/
Tatsächlich fand ich heraus, dass der container für das image-tag brauchen, um eine Höhe in Ordnung zu halten, das Verhältnis des Bildes.
zum Beispiel>
dann in Ihre html-container wird wickeln Sie die tag-Bild
diese Arbeit für IE und andere Browser
Ich hatte gerade das gleiche Problem. Verwenden Sie die flex-align: center Ihre Elemente. Sie benötigen
align-items: center
stattalign-content: center
. Dadurch wird das Seitenverhältnis beibehalten, während die align-content wird nicht halten das Seitenverhältnis.