Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » Operas Object-fit: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung

Operas Object-fit: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 14. August 2012

Inhaltsverzeichnis

Opera ist bekanntermaßen ein Browser mit sehr geringer Verbreitung. Darum ist es auch wenig sinnvoll, CSS-Eigenschaften einzusetzen, die ausschließlich vom norwegischen Browser unterstützt werden. Allerdings ist die „object-fit“-Eigenschaft eine schöne Idee für bessere Bildausrichtung sowie -beschneidung, weshalb es sich lohnt, sie sich einmal anzuschauen.

objectfit Operas Object-fit: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung

In der Regel werden Bilder ja entweder mit einer externen Bildbearbeitung oder serverseitig passend zurechtskaliert und -beschnitten. Die „object-fit“-Eigenschaft ermöglicht es jedoch, clientseitig ein Bild innerhalb eines Bildelementes mit fester Größe zu beschneiden und auszurichten.

Bilder beschneiden

Wird einem IMG-Element eine Höhen- und Breitenangabe zugewiesen, deren Seitenverhältnis nicht dem des Bildes entspricht, skaliert es normalerweise so, dass es in die angegebene Bildfläche passt – mit der Konsequenz, dass das Bild verzerrt und nicht mehr proportional angezeigt wird. Mit der „object-fit“-Eigenschaft hingegen, wird das Bild so beschnitten, dass das Seitenverhältnis erhalten bleibt:

img {
  object-fit: contain;
}

Mit dem Wert „contain“ wird erreicht, dass das Bild immer vollständig in der definierten Bildfläche angezeigt wird. Entsprechen die Proportionen des Bildes nicht denen des IMG-Elementes, wird oben und unten, beziehungsweise links und rechts, Freiraum gelassen.

objectfit beispiel1 Operas Object-fit: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung
Rechteckiges Bild in einem quadratischen Bildelement: ohne „object-fit“, mit „object-fit: contain“ und mit „object-fit: cover“

Alternativ gibt es die Möglichkeit, das Bild immer so darzustellen, dass es den gesamten Raum des IMG-Elementes einnimmt:

img {
  object-fit: cover;
  overflow: hidden;
}

Der Wert „cover“ sorgt zunächst dafür, dass das Bild nicht kleiner als die zur Verfügung stehende Fläche des IMG-Elementes dargestellt wird und bei ungleichen Proportionen links und rechts beziehungsweise oben und unten das Bild aus dem Rahmen hinausragt. Mit der Eigenschaft „overflow“ wird der herausragende Bildteil versteckt.

Bilder ausrichten

Neben der Eigenschaft „object-fit“ ermöglicht die Eigenschaft „object-position“ die Ausrichtung des Bildausschnittes innerhalb des Bildelementes. Normalerweise wird ein Bild horizontal und vertikal zentriert dargestellt. Mit „object-position“ lässt sich der Bildausschnitt auch links oder rechts, beziehungsweise oben oder unten ausrichten:

img {
  object-fit: cover;
  object-position: top right;
  overflow: hidden;
}

Erlaubt sind zwei Werte – je einer für die horizontale und vertikale Ausrichtung. Die Eigenschaft funktioniert ähnlich wie „background-position“ bei Hintergrundbildern.

objectfit beispiel2 Operas Object-fit: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung
Rechteckiges Bild in einem quadratischen Bildelement: mit „object-position: top left“, ohne „object-position“ und mit „object-position: top right“

Fazit: Eine schöne Sache, die derzeit leider nur von Opera unterstützt wird, weshalb auch mit Vendor-Präfixen („-o-object-fit“ und „-o-object-position“) gearbeitet werden muss. Wenn man ehrlich zu sich selbst ist, sollte man die Unterstützung durch andere Browser nicht so bald erwarten.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

WP Agentur

wp-agentur.de | WordPress-Agentur

Köln

Zwei N als Logo für die Niel Neumann Online Marketing Agentur.

Niels Neumann Online Marketing

Limburgerhof

One Step Webdesign hannover Logo

One Step Webdesign

Hannover

Wee Media Agentur Logo.

Wee Media | Webdesign Agentur

Dernbach

pictibe Media Consulting & Solution in Köln.

pictibe – Werbeagentur & Marketingagentur

Bergisch Gladbach

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „Operas Object-fit: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung“
— was ist Deine Meinung?

  1. ichunterwegs sagt:
    14. August 2012 um 14:51 Uhr

    Bin seit der Version 3 begeisterter Opera-Anwender (früher Windows, jetzt Mac und Linux). Die geringe Verbreitung dieses funktionellen Browsers ist mir noch immer ein Rätsel. Tabs, Maus-Gesten und andere sinnvolle Funktionen gab es bei Opera deutlich früher als bei der Konkurrenz. Ein Schwachpunkt ist leider noch immer die mangelhafte Unterstützung für Form-Eingaben. Das können FF & Co. besser.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑