Wie erreicht man die Bildskalierung „object-fit: cover;' in IE und Edge?

CSS-Fix für Bildskalierung in IE und Edge

Bei Verwendung von object-fit: cover; Wenn Sie die CSS-Regel für Bilder auf einer Seite verwenden, kann beim Skalieren des Browsers in IE oder Edge ein Problem auftreten, bei dem die Größe des Bildes in der Breite (nicht in der Höhe) geändert wird, anstatt zu zoomen. Dies führt zu einem verzerrten Bild.

Um dieses Problem zu beheben, kann eine CSS-Lösung implementiert werden:

1. Positionieren Sie das Bild mit dem folgenden Code absolut innerhalb seines Containers:

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

Dadurch wird das Bild in seinem Container zentriert.

2. Basierend auf der Ausrichtung des Bildes (vertikal oder horizontal) legen Sie die Höhen- und Breiteneigenschaften entsprechend fest:

• Für vertikale Blöcke (Höhe größer als Breite):

  height: 100%;
  width: auto;

• Für horizontale Blöcke (Breite größer als Höhe):

  height: auto;
  width: 100%;

Dadurch erhält das Bild die gewünschte Objekt-Passform: Cover; Dadurch wird sichergestellt, dass die Skalierung bei der Größenänderung in IE und Edge proportional erfolgt.

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