Wie erreicht man „object-fit: cover'-Verhalten in IE und Edge?

Beheben von Problemen mit dem Seitenverhältnis von Bildern mithilfe von Object-Fit in IE und Edge

Trotz der weit verbreiteten Unterstützung für die Object-Fit-Eigenschaft von CSS gibt es einige Browser wie Internet Explorer (IE) und Microsoft Edge können beim Skalieren von Bildern unerwünschtes Verhalten zeigen. Die Größe von Bildern ändert sich möglicherweise in der Breite statt in der Höhe, wodurch ihr Seitenverhältnis verzerrt wird.

Um dieses Problem zu beheben, kann die folgende CSS-Technik verwendet werden:

1. Positionieren Sie das Bild absolut innerhalb sein Container:

   position: absolute;

2. Zentrieren Sie das Bild mithilfe einer Kombination aus den Eigenschaften „oben“, „links“ und „Transformieren“:

   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

3. Passen Sie die an Höhe und Breite des Bildes abhängig von seiner Ausrichtung:

   // Vertically-oriented blocks
   height: 100%;
   width: auto;
   
   // Horizontally-oriented blocks
   height: auto;
   width: 100%;

Dieser Ansatz ermöglicht es dem Bild, den Effekt von object-fit:cover nachzuahmen und sicherzustellen, dass das Seitenverhältnis beim Skalieren beibehalten wird.

Hier ist eine Live-Demonstration dieser Technik:

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

Diese Lösung ist browserübergreifend kompatibel und stellt sicher, dass Bilder werden in IE, Edge und anderen modernen Browsern korrekt angezeigt.

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