Wie kann ich ein Bild mithilfe von CSS so skalieren, dass es in einen Begrenzungsrahmen passt und gleichzeitig das Seitenverhältnis beibehält?

Bilder mithilfe von CSS so skalieren, dass sie in Begrenzungsrahmen passen

In Situationen, in denen ein Bild größer als sein Container ist, bietet CSS eine unkomplizierte Lösung mit max -width- und max-height-Eigenschaften. Wenn das Ziel jedoch darin besteht, ein Bild zu vergrößern, bis eine seiner Dimensionen den gesamten Container ausfüllt, greift dieser Ansatz zu kurz.

CSS3-Lösung

Dank CSS3, Es gibt eine praktikable Lösung, die die Eigenschaften „Hintergrundbild“ und „Hintergrundgröße“ nutzt:

1. HTML:

   <code class="html"><div class="bounding-box">
   </div></code>

   Nach dem Login kopieren

2. CSS:

   <code class="css">.bounding-box {
     background-image: url(...);
     background-repeat: no-repeat;
     background-size: contain;
   }</code>

   Nach dem Login kopieren

Dieser Ansatz stellt sicher, dass das Bild so skaliert wird, dass es in den Begrenzungsrahmen passt und dabei sein Seitenverhältnis beibehält. Testen Sie es hier: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain.

Ausrichtung und Kompatibilität

Für Browser, die CSS3 unterstützen, ist diese Methode vollständig kompatibel. Um das Div zu zentrieren, verwenden Sie die folgende Variante:

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}</code>

Durch die Nutzung der Eigenschaft „Hintergrundgröße“ bietet CSS3 eine praktische und effektive Möglichkeit, Bilder so zu skalieren, dass sie in Begrenzungsrahmen passen, wobei die Bildproportionen erhalten bleiben und eine flexible Ausrichtung ermöglicht wird Optionen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild mithilfe von CSS so skalieren, dass es in einen Begrenzungsrahmen passt und gleichzeitig das Seitenverhältnis beibehält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!