So erzielen Sie einen nicht dehnenden Effekt von Bildern in CSS

In CSS können Sie die Eigenschaften des Hintergrundbilds festlegen, um den Effekt zu erzielen, dass das Bild nicht gestreckt wird. Normalerweise verwenden wir die folgenden zwei Methoden:

Methode 1: Hintergrundgröße

Verwenden Sie das Attribut „Hintergrundgröße“, um die Größe des Hintergrundbilds zu definieren. Sie können die Breite und Höhe des Hintergrundbilds angeben oder „Cover“ verwenden oder enthalten, um sich an die Größe des Hintergrundbilds anzupassen. Bei Verwendung von „Cover“ wird das Hintergrundbild gestreckt, um die gesamte Breite und Höhe des Elements auszufüllen, verformt sich jedoch nicht. Bei Verwendung von „contain“ behält das Hintergrundbild seine ursprüngliche Größe innerhalb des Elements bei, während es das Element vollständig ausfüllt.

Zum Beispiel kann der folgende Code das Hintergrundbild ohne Dehnung auf eine feste Größe festlegen:

div {
  background-image: url("example.jpg");
  background-size: 300px 200px;
}

Methode 2: Hintergrundposition

Verwenden Sie die Eigenschaft „Hintergrundposition“, um die Position des Hintergrundbilds festzulegen, wo der Wert sein kann Bestimmte Pixelwerte oder relative Positionen wie Mitte, Oberseite usw. sein. Wenn wir das Hintergrundbild in der Mitte des Elements positionieren, wird das Hintergrundbild nicht gestreckt, unabhängig davon, wie sich die Größe des Elements ändert.

Zum Beispiel setzt der folgende Code das Hintergrundbild in die Mitte des Elements:

div {
  background-image: url("example.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

Verwenden Sie die beiden oben genannten Methoden, um ein nicht dehnbares Hintergrundbild in CSS zu erhalten. Sie können je nach tatsächlicher Situation die für Sie geeignete Methode auswählen.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen nicht dehnenden Effekt von Bildern in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!