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 verwaltet das Herunterskalieren, aber nicht das Hochskalieren.

CSS3-Lösung:

Glücklicherweise bietet CSS3 eine Lösung:

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

HTML-Struktur:

Mit diesem Ansatz wird die Das Bild wird als Hintergrundbild des Begrenzungsrahmenelements festgelegt. Die Eigenschaft „background-size: include“ 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 die folgende Variante verwendet werden:

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