Wie behebt man Bildüberlauf und -verzerrung mit CSS Object-Fit?

CSS Object-Fit: Behalten Sie das Bildseitenverhältnis in responsiven Layouts bei

Bei Verwendung der CSS-Object-Fit: Eigenschaft enthalten, um sicherzustellen, dass Bilder responsiv bleiben Innerhalb von Flexbox-Containern kann es zu einem Problem kommen, bei dem das Layout die ursprüngliche Bildbreite beibehält, was zu unnötigen Bildlaufleisten führt.

Objektanpassung verstehen

Bevor Sie sich mit dem Problem befassen Lassen Sie uns zunächst klären, wie die Objektanpassung funktioniert. Die Eigenschaft definiert, wie der Inhalt eines Elements skaliert und innerhalb seines Begrenzungsrahmens positioniert werden soll. Bei der Einstellung „Enthalten“ wird die Größe des Inhalts (in unserem Fall das Bild) proportional angepasst, sein Seitenverhältnis beibehalten und er passt in den verfügbaren Raum.

Das Problem mit der Originalbildbreite

Im bereitgestellten Code-Snippet haben Sie Container mit overflow: auto definiert, das eine Bildlaufleiste einführt, wenn der Inhalt die Breite des Containers überschreitet. Die Breite des Bildes bleibt jedoch in ihrer ursprünglichen Größe, sodass das Layout die ursprünglichen Abmessungen des Bildes berücksichtigt.

Lösung

Um dies zu beheben, müssen Sie das explizit festlegen Breite der Bilder mithilfe der CSS-Eigenschaft width festlegen. Dadurch wird sichergestellt, dass die Breite des Bildes der Breite des Containers entspricht, sodass die Objektanpassungseigenschaft das Bild korrekt skalieren und positionieren kann, während das Seitenverhältnis erhalten bleibt.

Aktualisierter Code

Hier ist eine aktualisierte Version Ihres CSS-Codes, die die Eigenschaft „Breite“ enthält:

<code class="css">img {
  object-fit: contain;
  width: 100%;
}</code>

Durch Hinzufügen der Regel „Breite: 100 %“ weisen Sie den Browser an, die Breite des Bildes genau an seinen Container anzupassen. Ermöglichen, dass die Eigenschaft „object-fit:contain“ wie beabsichtigt funktioniert.

Das obige ist der detaillierte Inhalt vonWie behebt man Bildüberlauf und -verzerrung mit CSS Object-Fit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!