Ein
Element ist ein Inline-Element (Anzeigewert von inline-block
). Es kann einfach zentriert werden, indem die text-align: center;
CSS-Eigenschaft dem übergeordneten Element hinzugefügt wird , das sie enthält.
Um ein Bild mit zu text-align: center;
zentrieren, müssen Sie das
Innere eines Elements auf Blockebene platzieren, z div
. Da die text-align
Eigenschaft nur für Elemente auf Blockebene gilt, platzieren Sie sie text-align: center;
auf dem Element auf Blockebene, um eine horizontale Zentrierung zu erzielen
.
Beispiel
Center an Image using text align center .img-container { text-align: center; }
Hinweis: Das übergeordnete Element muss ein Blockelement sein. Wenn es sich nicht um ein Blockelement handelt, sollten Sie diedisplay: block;
CSS-Eigenschaft zusammen mit dertext-align
Eigenschafthinzufügen.
Center an Image using text align center .img-container { text-align: center; display: block; }
Demo: Codepen
Objektanpassung
Sobald Ihr Bild zentriert ist, möchten Sie möglicherweise die Größe ändern. Die object-fit
Eigenschaft gibt an, wie ein Element auf die Breite / Höhe des übergeordneten Felds reagiert.
Diese Eigenschaft kann für Bilder, Videos oder andere Medien verwendet werden. Es kann auch mit der object-position
Eigenschaft verwendet werden, um mehr Kontrolle darüber zu erhalten, wie das Medium angezeigt wird.
Grundsätzlich verwenden wir die object-fit
Eigenschaft, um zu definieren, wie ein Inline-Medium gedehnt oder gequetscht wird.
Syntax
.element
Werte
fill
: Dies ist der Standardwert . Ändern Sie die Größe des Inhalts unabhängig vom Seitenverhältnis so, dass er mit dem übergeordneten Feld übereinstimmt.contain
: Ändern Sie die Größe des Inhalts, um das übergeordnete Feld mit dem richtigen Seitenverhältnis zu füllen.cover
: ähnlich wie,contain
aber oft den Inhalt beschneiden.none
: zeigt das Bild in seiner Originalgröße an.scale-down
: Vergleichen Sie den Unterschied zwischennone
undcontain
, um die kleinste konkrete Objektgröße zu ermitteln.
Browser-Kompatibilität
Das object-fit
wird von den meisten modernen Browsern unterstützt, für die die aktuellsten Informationen über die Kompatibilität Sie dies aus //caniuse.com/#search=object-fit überprüfen können.
Dokumentation
- Textausrichtung - MDN
- Objektanpassung - MDN
- MDN