Wie kann ich Bilder nur mit CSS so skalieren, dass sie in Begrenzungsrahmen passen?

Bilder nur mit CSS so skalieren, dass sie in Begrenzungsrahmen passen

Es kann eine Herausforderung sein, einen dynamischen Bildskalierungseffekt zu erzielen, der das Seitenverhältnis beibehält. Mithilfe von CSS3-Techniken können wir dieses Problem jedoch lösen und Bilder so skalieren, dass sie in einen Begrenzungsrahmen passen.

Der herkömmliche Ansatz mit CSS besteht darin, die Eigenschaften „max-width“ und „max-height“ zu verwenden, die Bilder entsprechend verkleinern innerhalb eines bestimmten Containers. Bei der Skalierung von Bildern greifen diese Eigenschaften jedoch zu kurz.

CSS3-Lösung

CSS3 bietet die Lösung durch die Eigenschaften „Hintergrundbild“ und „Hintergrundgröße“. Indem wir ein Bild als Hintergrund eines Containers festlegen und „background-size: include“ verwenden, können wir die Skalierung des Bildes erzwingen, bis eine Dimension die volle Breite oder Höhe des Begrenzungsrahmens erreicht.

HTML

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

CSS

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

Kompatibilität und Optionen

Diese Lösung wird von den neuesten Browsern unterstützt . CanIUse bietet eine detaillierte Kompatibilitätstabelle.

Um das Bild innerhalb des Begrenzungsrahmens zu zentrieren, kann eine Variation des CSS 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 kann ich Bilder nur mit CSS so skalieren, dass sie in Begrenzungsrahmen passen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!