CSS/Eigenschaften/Anzeige/object-fit

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Bilder und Videos auf Webseiten sind ersetzte Elemente, deren Inhalt durch die referenzierte Datei ersetzt wird. Eine Gestaltung der Grafik wie bei Hintergrundbildern mit background-size und background-position ist deshalb nicht möglich.

Im CSS Image Values and Replaced Content Module wurden deshalb mit object-fit und object-position Eigenschaften zur Gestaltung festgelegt.

[Bearbeiten] object-fit

Die object-fit Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements wie img oder video an die Box angepasst werden, die durch dessen verwendete Höhe und Breite erzeugt wird.

  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Folgende Werte sind möglich:

  • fill: (Standardwert) wird in der Größe angepasst, sodass die Inhaltsbox des Elements ausgefüllt wird, kann dabei im Seitenverhältnis verzerrt werden
  • contain: wird angepasst, ohne dass die Seitenverhältnisse des Elements verändert werden
  • cover: wird so in der Größe angepasst, dass es seine Inhaltsbox vollständig ausfüllt, ohne dabei sein Seitenverhältnis zu verlieren. Falls das Seitenverhältnis nicht übereinstimmt, wird die Grafik zugeschnitten.
  • none: keine Anpassung
  • scale-down: wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.

ToDo (weitere ToDos)

Beispiele -- Matthias Scharwies (Diskussion) 10:13, 21. Nov. 2016 (CET)

[Bearbeiten] object-position

Die object-position Eigenschaft bestimmt ähnlich der background-position, an welcher Stelle sich die linken oberen Ecken von ersetzten Elementen befinden sollen.

  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Folgende Werte sind möglich:

  • Längenangabe in Prozent: (Standardwert 50% 50%)
    Die erste Längenangabe bezeichnet dabei die Position in x-Richtung, die zweite die in y-Richtung. Auch negative Werte sind möglich.
    Beachten Sie: Wird nur eine Längenangabe gemacht, so ist dies die horizontale Position, der fehlende Wert wird mit center initialisiert.
  • Schlüsselwörter:
    • left, center, right, für die horizontale Positionierung
    • top, center, bottom, für die vertikale Positionierung
      Beachten Sie: Wird von diesen Schlüsselwörtern nur ein Wert gesetzt, so wird die fehlende Angabe mit center initialisiert.


[Bearbeiten] Weblinks


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML