Wie kann ich das Bildseitenverhältnis bei der Größenänderung mit CSS beibehalten?

Bildproportionen bei der Größenanpassung mit CSS beibehalten: Eine umfassende Anleitung

Im Bereich der Webentwicklung ist es oft notwendig, die Größe von Bildern anzupassen, damit sie passen verschiedene Anzeigeanforderungen. Es ist jedoch wichtig, das Seitenverhältnis des Bildes beizubehalten, um unerwünschte Dehnungen oder Verzerrungen zu vermeiden. Um dies zu erreichen, bietet CSS eine elegante Lösung.

Object-Fit: Der Schlüssel zur Beibehaltung von Proportionen

Die Eigenschaft „Object-Fit“ steuert, wie der Inhalt eines ersetzten Elements aussieht B. ein Bild oder ein Video, sollte an die Größe des Containers angepasst werden. Mithilfe dieser Eigenschaft können wir die Größe eines Bildes festlegen und dabei sein ursprüngliches Seitenverhältnis beibehalten.

Proportionen beim Füllen eines Elements beibehalten

Um ein Element zu füllen Um ein Bild unter Beibehaltung der Proportionen zu erstellen, verwenden Sie den Wert „cover“ für die Eigenschaft „Objektanpassung“. Dadurch wird der Browser angewiesen, die Größe des Bildes so zu ändern, dass es das Element vollständig ausfüllt, während überschüssiger Inhalt an den Rändern abgeschnitten wird, um sicherzustellen, dass das Seitenverhältnis beibehalten wird.

Zum Beispiel:

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img src="https://i.sstatic.net/2OrtT.jpg">

Code-Demonstration

Im obigen Beispiel verwendet die Cover-Klasse die Eigenschaft object-fit:cover, um sicherzustellen, dass das Bild so skaliert wird, dass das Element gefüllt wird eine Breite von 150 Pixel und eine Höhe von 100 Pixel. Trotz der ursprünglichen Abmessungen des Bildes (242 Pixel Breite, 363 Pixel Höhe) wird es skaliert und zugeschnitten, um sein Seitenverhältnis innerhalb der angegebenen Elementgröße beizubehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich das Bildseitenverhältnis bei der Größenänderung mit CSS beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!