DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die object-fit-Eigenschaft definiert, wie ein Element auf die Höhe und Breite seiner Contentbox reagiert. Sie ist für Bilder, Videos und andere einbettbare Medienformate in Verbindung mit der object-position-Eigenschaft vorgesehen. Allein verwendet, lässt uns object-fit ein Inline-Bild zuschneiden, indem es uns eine präzise Kontrolle darüber gibt, wie es sich in seine Box einfügt und streckt.
object-fit kann mit einem der folgenden fünf Werte gesetzt werden
fill: Dies ist der Standardwert, der das Bild unabhängig vom Seitenverhältnis so streckt, dass es in die Contentbox passt.contain: Vergrößert oder verkleinert das Bild, um die Box zu füllen, während das Seitenverhältnis beibehalten wird.cover: Das Bild füllt die Höhe und Breite seiner Box aus, wobei das Seitenverhältnis wieder beibehalten wird, aber das Bild oft dabei zugeschnitten wird.none: Das Bild ignoriert Höhe und Breite des übergeordneten Elements und behält seine ursprüngliche Größe bei.scale-down: Das Bild vergleicht die Unterschiede zwischennoneundcontain, um die kleinste tatsächliche Objektgröße zu ermitteln.
So könnten wir diese Eigenschaft setzen
img {
height: 120px;
}
.cover {
width: 260px;
object-fit: cover;
}
Da das zweite Bild ein anderes Seitenverhältnis als das Originalbild auf der linken Seite hat, wird es über den Bereich seiner Contentbox hinaus gestreckt und die oberen und unteren Teile des Bildes werden abgeschnitten.
Es ist erwähnenswert, dass das Bild standardmäßig in seiner Contentbox zentriert ist, dies kann aber mit der object-position-Eigenschaft geändert werden.
Demo
Die untenstehende Demo zeigt fünf Beispiele, die detailliert erläutern, wie ein Bild in eine Contentbox passen könnte, die manchmal kleiner oder größer als seine ursprüngliche Breite ist (passen Sie die Browsergröße an, um eine bessere Vorstellung davon zu bekommen, wie dies funktionieren könnte)
Siehe den Pen object-fit von Robin Rendle (@robinrendle) auf CodePen.
Wenn der Inhalt des Bildes die Contentbox aus irgendeinem Grund nicht ausfüllt, wird der nicht gefüllte Bereich den Hintergrund des Elements anzeigen, in diesem Fall einen hellgrauen Hintergrund.
Verwandte Eigenschaften
Weitere Ressourcen
Browser-Unterstützung
Es ist erwähnenswert, dass iOS 8-9.3 und Safari 7-9.1 die object-fit-Eigenschaft, aber nicht object-position unterstützen.
Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl zeigt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 32 | 36 | Nein | 79 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4.3-4.4.4 | 10.0-10.2 |
Das Polyfill ist eine Lüge! Abgesehen von Portalreferenzen funktioniert das Polyfill zum Zeitpunkt des Schreibens derzeit nicht in IE, was für mich sehr schade ist, da ich etwas JavaScript schreiben muss, um diese wunderschöne CSS-Eigenschaft weiterhin verwenden zu können.
Hier dasselbe. Der ganze Sinn eines Polyfills ist es, IE/Edge nett zu machen. Ich habe mich an das IE/Edge Entwicklerforum gewandt (https://dev.modern.ie/platform/status//). Wir als Gemeinschaft sollten Microsoft mitteilen, welche Features wir wirklich wollen. Es ist jetzt „in Betracht gezogen“.
Es gibt einige perfekt funktionierende Polyfills
* für Bilder: https://github.com/bfred-it/object-fit-images
* für Videos: https://github.com/jonathantneal/fitie
Falls jemand eine IE9, IE10, Edge-Hack-Lösung benötigt, habe ich einen Workaround, der eigentlich kein Zuschneiden, sondern einen meiner Meinung nach akzeptablen Fallback für IE9+ liefert.
…
…
…
// IE9 HACK
:root figure {
height:200px;
overflow:hidden;
}
…
Vielleicht übersehe ich etwas ... Ich sehe keinen Vorteil dieser Eigenschaft? Fluidbilder füllen einen übergeordneten Container aus und behalten ihr Seitenverhältnis bei. Sie können horizontal mit der Eigenschaft „text-align“ und vertikal mit „vertical-align“ ausgerichtet werden. Die einzige Ausnahme wäre, wenn man möchte, dass das Bild vom übergeordneten Element beschnitten wird (object-fit: cover).
Der Grund, warum ich sie verwenden möchte, ist genau das, was Sie gesagt haben. Ich ersetze einige Dinge, die CSS-Hintergrundbilder verwendet haben, durch reaktionsfähige Bilder, und ich muss object-fit:cover darauf verwenden. Vielleicht wird jemand srcset für Hintergrundbilder im CSS-Standard vorschlagen. =)
Betrachten Sie ein Featured Image eines Blogs. Wenn Sie
background-imageals einzige Möglichkeit zur Anzeige des Bildes verwenden, aufgrund von Designbeschränkungen, wird dieses Bild nicht als Metadaten angezeigt, wenn der Artikel in sozialen Medien oder bei Google-Suchen geteilt wird.Sie können die Layout-Vorteile von
background-imagemit Bildern erzielen, ohne die Daten zu opfern, die Sie außerhalb Ihrer Seite benötigen, um Ihren Beitrag richtig anzuzeigen.Danke für den Trick
object fit CSS funktioniert im IE-Browser nicht. Bitte geben Sie bald eine alternative Lösung.
Es gibt einen IE-Hack drei Kommentare weiter oben, der seriös aussieht. Ich bin noch nicht auf den „IE ist jetzt okay!“-Zug aufgesprungen, daher weiß ich nicht, ob er wirklich seriös ist, aber es scheint einen Versuch wert zu sein.
Toller Beitrag :) Ich liebe object fit! Es hat mir das Leben leichter gemacht, als ich eine Website an das Design anpassen musste, das ich hatte. Native LG & Samsung Browser unterstützen object-fit ebenfalls nicht. Das Polyfill funktioniert bei ihnen hervorragend.
Ich nutze object-fit sehr gerne anstelle von inline-Hintergrundbildern und habe daher ein bis zwei Stunden damit verbracht, ein funktionierendes jQuery-Polyfill für IE Edge und andere Browser, die es nicht unterstützen, zu entwickeln. Schauen Sie es sich gerne an (und tragen Sie dazu bei, wenn Sie Probleme sehen!)
https://github.com/constancecchen/object-fit-polyfill
Alternativ können Sie auch die Lösung von Primož Cigler ausprobieren, der das Bild als Hintergrundbild auf dem übergeordneten Container setzt. https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.sqaa2ssg4
Constance, dein Polyfill ist fantastisch. Vielen Dank. Die anderen, die ich ausprobiert habe, funktionierten für meine Situation nicht.
Vielen Dank dafür (object-fit: contain). Es hat wie am Schnürchen funktioniert, um die Größen meiner Featured Images in cpts zu steuern.
FYI https://jsfiddle.net/trixta/x2p17f31/ diese Demo funktioniert in IE11 ;)
https://github.com/aFarkas/lazysizes und unterstützt auch object-position!
Kann man object-fit auf Hintergrundbilder anwenden? Ich versuche seit 3 Tagen, das Hintergrundbild zu verkleinern, aber auf Mobilgeräten und Laptops werden völlig unterschiedliche Teile des Bildes angezeigt.
@Abdul Ich denke, was Sie suchen, wird durch die CSS-Eigenschaften `background-size` (https://css-tricks.de/almanac/properties/b/background-size/) und `background-position` (https://css-tricks.de/almanac/properties/b/background-position/) abgedeckt.
Bei ‚contain‘, wie ermittelt man die resultierende skalierte Bildgröße? Das Bild wird je nach Ausrichtung des Bildschirms und des Bildes auf unterschiedliche Weise eingeschränkt, daher ist es nicht einfach, es herauszufinden. Da der Browser die Arbeit bereits erledigt hat, gibt es keine Eigenschaften des img-Elements, die die skalierten Abmessungen darstellen?
Eine Erinnerung an die Auswirkungen von CSS-Hintergründen gegenüber img-Elementen auf die Barrierefreiheit: Wenn das Bild rein dekorativ ist, dann verwenden Sie einen CSS-Hintergrund. Andernfalls ist ein img geeigneter.