Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Eigenschaften/Anzeige/object-fit

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Anzeige(Weitergeleitet von Object-position)
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.
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 Beispiele 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.

Anwendungsbeispiele[Bearbeiten]

Kreisrunder Ausschnitt eines rechteckigen Bildes[Bearbeiten]

Wenn man ein rechteckiges Bild kreisrund darstellen möchte, kann man mit border-radius: 50% die Ecken abrunden. Allerdings verzerrt sich das Bild, wenn man Höhe und Breite auf den gleichen Wert setzt. Anstelle des Einsatz eines Container-Elements ist dies mit object-fit und object-position viel einfacher:

kreisrunder Ausschnitt ansehen …
.rund {
 object-fit: cover;
 object-position: 50% 0;
 border-radius: 50%;
 width: 15em;
 height: 15em;
}

.vergleich {
 object-fit: cover;
 object-position: 50% 100%;
 border-radius: 50%;
 width: 15em;
 height: 15em;
}
Die abgerundeten Bilder erhalten eine feste Größe von 15em Breite und 15em Höhe. Da die referenzierte Grafik aber rechteckig ist, wird sie mit object-position im ersten Beispiel .rund so nach oben verschoben, dass das Gesicht im Mittelpunkt ist. Im zweiten Beispiel .vergleich richtet sich das Bild am unteren Ende aus.

Panorama mit Image-Slider[Bearbeiten]

Dieses Beispiel beruht auf einem Missverständnis im Form. Der Threadersteller wollte eigentlich ein Bilderkarussell - ein slider ist ein Schieberegler type = "range". Er eignet sich dafür, Panoramabilder, die aufgrund ihrer Breite nur in geringer Höhe dargestellt werden können, so zu formatieren, dass jeweils ein Ausschnitt größer dargestellt wird:

Panorama mit object-position verschieben ansehen …
figure img, figcaption, input {
	width: 335px;
	max-width: 100%;
	margin-bottom: 0.4em;
}

figure img {
	height: 335px; 
	object-fit: cover;
	object-position: calc(var(--percentage, 0) * 1%) center;
}

Das Bild innerhalb des Figure-Containers (figure img) wird 335px breit und hoch, obwohl das Panorama viel breiter ist. Mit object-fit:cover füllt es nun den gesamten Platz, deshalb stehen die Seiten außerhalb des verfügbaren Platzes. Mit dem Slider wird bei einer Eingabe über eine CSS-Variable der Wert für object-position verändert und das Bild entsprechend verschoben.


Weblinks[Bearbeiten]