Wie kann ich ein Bild mithilfe von CSS automatisch zentrieren und auf eine bestimmte quadratische Größe zuschneiden?

Automatisches Zentrieren und Zuschneiden eines Bildes

Oft besteht die Notwendigkeit, ein Bild zuzuschneiden und zu zentrieren, damit es in eine bestimmte quadratische Abmessung passt, ohne dass dies erforderlich ist Vorkenntnisse über die Größe des Bildes. Dies kann durch die Verwendung der CSS-Eigenschaft „Hintergrundbild“ erreicht werden.

Zentrieren eines Bildes mit dynamischem Zuschneiden

Um ein Bild dynamisch zu zentrieren und zuzuschneiden, führen Sie die folgenden Schritte aus:

1. Definieren Sie ein HTML-Element mit einer bestimmten Breite und Höhe, das die gewünschten Zuschnittmaße darstellt.
2. Verwenden Sie die Eigenschaft „Hintergrundbild“, um die Bild-URL festzulegen.
3. Richten Sie das Bild mit „background-position: center center;“ in der Mitte aus.
4. Verhindern Sie, dass sich das Bild wiederholt, indem Sie „background-repeat: no-“ festlegen. wiederholen;.

Beispiel Code:

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped">

Durch die Verwendung dieser Technik wird das Bild automatisch zentriert und innerhalb der definierten Abmessungen zugeschnitten, unabhängig von seiner Originalgröße.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild mithilfe von CSS automatisch zentrieren und auf eine bestimmte quadratische Größe zuschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!