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.

object-fit[Bearbeiten]

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
  • Edge
  • 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.
Beispiel: object-fit ansehen …
main {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

section > img {
  width: 20em;
  height: 15em;
  border: 1px solid #000;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
Die Bilder erhalten eine feste Größe von 20em Breite und 15em Höhe. Da die referenzierte SVG-Grafik aber quadratisch ist und eine feste Größe von 466x466px hat, muss sie an die Größe des img-Elements angepasst werden.
Die fünf Beispiel zeigen die verschiedenen Werte.

object-position[Bearbeiten]

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
  • Edge
  • 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.


Weblinks[Bearbeiten]