Wie skaliere ich Bilder nur mithilfe von CSS so, dass sie in Begrenzungsrahmen passen?

Bilder hochskalieren, damit sie in Begrenzungsrahmen passen, nur mit CSS:

Die Herausforderung besteht darin, ein Bild so hochzuskalieren, dass es in einen Begrenzungsrahmen passt Beibehaltung des Seitenverhältnisses. Der bereitgestellte CSS-Code übernimmt das Herunterskalieren, aber nicht das Hochskalieren.

CSS3-Lösung:

Glücklicherweise bietet CSS3 eine Lösung:

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

HTML-Struktur:

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

Bei diesem Ansatz wird das Bild als Hintergrundbild des Begrenzungsrahmenelements festgelegt. Die Eigenschaft „Hintergrundgröße: enthalten“ stellt sicher, dass das Bild so skaliert wird, dass es den Begrenzungsrahmen ausfüllt, ohne ihn zu beschneiden oder zu verzerren.

Kompatibilität:

Diese Lösung ist gut mit modernen Lösungen kompatibel Browser. Aktuelle Kompatibilitätsinformationen finden Sie unter http://caniuse.com/background-img-opts.

Zentrierung:

Zum Zentrieren des Bildes innerhalb des Begrenzungsrahmens , kann folgende Variante verwendet werden:

<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>

Das obige ist der detaillierte Inhalt vonWie skaliere ich Bilder nur mithilfe von CSS so, dass sie in Begrenzungsrahmen passen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!