So ändern Sie die Größe von Bildern mithilfe von object-fit: include richtig

Objekt-Fit: Contain und Bildgrößenänderung verstehen

Wenn Sie CSS Object-Fit: Contain verwenden, um Bilder in Flexbox-Containern responsiv zu machen, ist dies der Fall Es ist wichtig zu verstehen, wie sich diese Eigenschaft auf die Bildbreite auswirkt. Trotz der Größenänderung von Bildern behält das Layout möglicherweise die ursprüngliche Bildgröße bei, was zu einer Bildlaufleiste führt.

In object-fit: include wird das Bild proportional skaliert, sodass das gesamte Bild beim Beibehalten innerhalb des angegebenen Containers bleibt sein Seitenverhältnis. Dadurch wird sichergestellt, dass das Bild vollständig sichtbar ist und ein Beschneiden vermieden wird. Die Größe des Bildes wird jedoch nicht unbedingt an die Breite seines Containers angepasst.

Um dieses Problem zu beheben, müssen Sie die CSS-Eigenschaft „Breite“ des Containers auf einen bestimmten Wert oder Prozentsatz festlegen, den Sie für das Bild benötigen angezeigt werden soll.

Zum Beispiel, wenn Sie den folgenden HTML-Code haben:

<code class="html"><div class="container">
  <img src="image.jpg" />
</div></code>

Und das folgende CSS:

<code class="css">.container {
  width: 50%;
  height: 50%;
}

img {
  object-fit: contain;
}</code>

Das Bild wird proportional skaliert damit es in den .container passt, die Breite des Bildes bleibt jedoch in seiner ursprünglichen Größe. Um die Breite des Containers anzupassen, können Sie die Breite des .containers als Prozentsatz oder absoluten Wert angeben:

<code class="css">.container {
  width: 100vw;  // 100% of the viewport width
}

// or

.container {
  width: 500px;  // 500 pixels
}</code>

Denken Sie daran, dass „object-fit: include“ nur sicherstellt, dass das Bild innerhalb des Containers sichtbar ist ohne Zuschneiden. Wenn Sie die Größe des Bildes speziell an die Breite des Containers anpassen müssen, müssen Sie die Breiteneigenschaft des Containers entsprechend festlegen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Größe von Bildern mithilfe von object-fit: include richtig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!