Object-Fit: Cover schlägt in IE und Edge fehl, wie kann man das beheben?

Object-Fit: Cover schlägt in IE und Edge fehl, wie kann man das beheben?

Verwendung von object-fit: cover; in CSS, um eine konsistente Bildhöhe beizubehalten, funktioniert nahtlos in allen Browsern. Allerdings tritt im IE und Edge ein besonderes Problem auf. Beim Skalieren des Browsers ändert sich die Größe des Bildes in der Breite, anstatt es in der Höhe zu vergrößern, wodurch sein Erscheinungsbild verzerrt wird.

Um dieses Problem zu lösen, verwenden wir eine clevere CSS-Lösung, die das Problem löst:

< pre>position: absolut;
oben: 50 %;
links: 50 %;
transform: translator(-50 %, -50 %);
height: 100 %;
width : automatisch; // Für vertikale Blöcke
height: auto;
width: 100%; // Für horizontale Blöcke

Diese Kombination positioniert das Bild mithilfe der absoluten Positionierung in der Mitte, wodurch das Problem mit object-fit: cover in IE und Edge beseitigt wird. Das Bild wird nun proportional skaliert und behält den gewünschten Effekt ohne Verzerrung bei.

Um die Wirksamkeit der Lösung zu veranschaulichen, betrachten Sie die folgende Demonstration:

Demonstration der Bildgrößenänderung

Dieser Ansatz stellt ein konsistentes Bildverhalten in allen Browsern sicher und behebt effektiv das Objekt-Fit: Cover-Problem in IE und Edge.

Das obige ist der detaillierte Inhalt vonObject-Fit: Cover schlägt in IE und Edge fehl, wie kann man das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!