Wie behebt man das Problem „object-fit: cover“ in IE und Edge?

Objektanpassung beheben: Cover-Problem in IE und Edge

In dieser Situation sollen Bilder während der Verwendung eine konsistente Höhe beibehalten object-fit: cover, eine Herausforderung entsteht in IE- und Edge-Browsern. Anstatt das Bild zu vergrößern, verändern diese Browser seine Breite, was zu einem verzerrten Erscheinungsbild führt.

Um dieses Problem zu beheben, kann eine Kombination von CSS-Techniken eingesetzt werden:

1. Zentrieren Sie das Bild: Platzieren Sie das Bild mithilfe der Eigenschaft „Absolute Positionierung“ in der Mitte seines Containers. Dies wird mit dem folgenden Code erreicht:

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

2. Passen Sie die Bildgröße an: Passen Sie basierend auf der Ausrichtung des Bildes (vertikal oder horizontal) seine Höhe an und Breite entsprechend:

<code class="css">// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;</code>

Diese CSS-Kombination ermöglicht den gewünschten Objektanpassungs-Cover-Effekt und stellt sicher, dass das Bild wie beabsichtigt in IE- und Edge-Browsern skaliert und gezoomt wird und gleichzeitig eine konsistente Höhe beibehält in anderen Browsern.

Das obige ist der detaillierte Inhalt vonWie behebt man das Problem „object-fit: cover“ in IE und Edge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!