Wie behebt man Object-Fit: Cover-Verzerrung in IE und Edge?

Auflösen von Object-Fit: Cover-Verzerrungen in IE und Edge

In Situationen, in denen bestimmte Bilder eine konsistente Höhe beibehalten müssen, verwenden Sie CSSs object-fit: cover; -Eigenschaft können Benutzer auf ein Problem in IE- und Edge-Browsern stoßen. Beim Skalieren des Browsers ändert sich die Größe des Bildes in der Breite, anstatt zu zoomen, was zu Verzerrungen führt.

Um dieses Problem zu beheben, ziehen Sie den folgenden CSS-Ansatz in Betracht:

1. Positionieren Sie das Bild absolut innerhalb seines Containers:

<code class="css">position: absolute;</code>

2. Zentrieren Sie das Bild mit der folgenden Kombination:

<code class="css">top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>

3. Stellen Sie die folgenden Abmessungen für das Bild ein:

<code class="css">// For vertical blocks (height greater than width):
height: 100%;
width: auto;

// For horizontal blocks (width greater than height):
height: auto;
width: 100%;</code>

Dieser Ansatz emuliert den Effekt von object-fit:cover; und sorgt für konsistentes Verhalten in allen Browsern, einschließlich IE und Edge.

Eine praktische Demonstration finden Sie unter:

https://jsfiddle.net/furqan_694/s3xLe1gp/

Das obige ist der detaillierte Inhalt vonWie behebt man Object-Fit: Cover-Verzerrung in IE und Edge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!