Wie skaliert man ein Bild, um einen Begrenzungsrahmen zu füllen und gleichzeitig das Seitenverhältnis in CSS beizubehalten?

Ein Bild so skalieren, dass es einen Begrenzungsrahmen ausfüllt und dabei das Seitenverhältnis beibehält

Ein Bild so skalieren, dass es in einen Begrenzungsrahmen passt und gleichzeitig sein Seitenverhältnis beibehält stellen eine Herausforderung in CSS dar.

Berücksichtigen Sie die folgenden Anwendungsfälle:

• Anwendungsfall 1:Bild größer als Container.
• Anwendungsfall 2:Bild kleiner als Container (verkleinert).
• Anwendungsfall 3:Bild kleiner als Container (vergrößert).

Die Standard-CSS-Eigenschaften max-width und max-height funktionieren nur, wenn das Bild größer als der Container ist (Use Case 1 und 2).

Glücklicherweise bietet CSS3 eine Lösung für Use Case 3. Durch das Setzen von Wenn Sie das Bild als Hintergrundbild verwenden und die Eigenschaft „background-size“ mit dem Wert „contain“ verwenden, kann das Bild so skaliert werden, dass es den Container ausfüllt, ohne sein Seitenverhältnis zu verzerren.

HTML:

<div class='bounding-box'>
</div>

CSS:

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

So zentrieren Sie das Bild im Container:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Diese Lösung ist mit den meisten modernen Browsern kompatibel.

Das obige ist der detaillierte Inhalt vonWie skaliert man ein Bild, um einen Begrenzungsrahmen zu füllen und gleichzeitig das Seitenverhältnis in CSS beizubehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!