Wie behalte ich die Originalbildbreite bei, wenn ich CSS „object-fit: include' verwende?

CSS-Objektanpassung: enthalten; Beibehaltung der ursprünglichen Bildbreite im Layout

Bei Verwendung der CSS-Eigenschaft „object-fit: include“ zum Ändern der Größe von Bildern in Flexbox-Containern können die Bilder selbst entsprechend skaliert werden, während das Layout die ursprüngliche Bildbreite beibehält. Dies kann zum Erscheinen einer horizontalen Bildlaufleiste führen.

Um zu verstehen, warum dies geschieht, ist es wichtig zu verstehen, wie die Objektanpassung funktioniert. Sehen wir uns ein einfacheres Beispiel an:

<code class="css">.box {
  width: 300px;
  height: 300px;
  border: 1px solid;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}</code>

<code class="html"><div class="box">
  <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/300/200?image=1069" class="lazy" alt="Wie behalte ich die Originalbildbreite bei, wenn ich CSS „object-fit: include' verwende?" >
</div></code>

In diesem Szenario wird das img-Element angewiesen, vollständig in den .box-Container zu passen und gleichzeitig sein Seitenverhältnis beizubehalten. Da der Container jedoch eine feste Breite hat, hat das Bild selbst möglicherweise nicht genügend Platz zum Erweitern.

Hier kommt object-fit:contain ins Spiel. Dadurch wird das Bild verkleinert, damit es in die Breiten- und Höhenbeschränkungen des Containers passt. Die ursprüngliche Breite des img-Elements bleibt jedoch gleich. Dies liegt daran, dass die Breiten- und Höheneigenschaften des img-Elements nur die angezeigte Größe des Bildes beeinflussen, nicht die tatsächliche Größe des darunter liegenden Bildes.

Um das Problem in Ihrem ursprünglichen Code zu beheben, können Sie Folgendes in Betracht ziehen:

• Verwenden von width: 100 % und height: auto für das img-Element, damit es auf natürliche Weise entsprechend seinem ursprünglichen Seitenverhältnis skaliert werden kann.
• Overflow: Hidden zum Containerelement hinzufügen, um dies zu verhindern die horizontale Bildlaufleiste wird nicht angezeigt.

Das obige ist der detaillierte Inhalt vonWie behalte ich die Originalbildbreite bei, wenn ich CSS „object-fit: include' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!