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

Bild so skalieren, dass es in einen Begrenzungsrahmen passt

Ein Bild innerhalb eines Begrenzungsrahmens nur mithilfe von CSS proportional zu skalieren, scheint eine unkomplizierte Aufgabe zu sein. Dieser Ansatz greift jedoch zu kurz, wenn das gewünschte Ergebnis darin besteht, das Bild zu vergrößern, bis es eine Dimension des Begrenzungsrahmens vollständig ausfüllt.

Nur ​​CSS-Lösung

Glücklicherweise CSS3 bietet eine Lösung für dieses Dilemma. Durch die Nutzung der Eigenschaften „Hintergrundbild“ und „Hintergrundgröße“ können Sie Bilder innerhalb von Begrenzungsrahmen nach Bedarf skalieren.

Implementierung

Um diese Lösung zu implementieren, führen Sie die folgenden Schritte aus:

1. Erstellen Sie einen Begrenzungsrahmen: Schließen Sie das Bild in ein HTML-Element ein, das als Begrenzungsrahmen dient.
2. Hintergrundbild festlegen: Definieren Sie das Bild als Hintergrundbild für den Begrenzungsrahmen.
3. Hintergrundeindämmung aktivieren: Geben Sie „Hintergrundgröße: enthalten“ an, um sicherzustellen, dass das Bild so skaliert wird, dass es in den Begrenzungsrahmen passt Beibehaltung des Seitenverhältnisses.

Beispiel

<code class="html"><div class="bounding-box">
  <!-- Image as background-image -->
</div></code>

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

Zusätzliche Überlegungen

• Browserkompatibilität: Diese Lösung ist mit modernen Browsern kompatibel, wie von CanIUse.com bestätigt.
• Zentrieren des Bildes: Um das Bild innerhalb des Begrenzungsrahmens zu zentrieren, verwenden Sie das folgende CSS:

<code class="css">.bounding-box {
  position: absolute;
  background-position: center;
}</code>

Durch die Nutzung dieser CSS-Techniken können Sie Bilder effektiv skalieren, um Begrenzungsrahmen auszufüllen und gleichzeitig ihre ursprünglichen Proportionen beizubehalten.

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