Wie erhöhe ich das Bild, um div zu überdecken, aber nicht über die Originalgröße des Bildes?

Question

Gibt es eine Möglichkeit (mit CSS), das Bild so abzubilden, dass es ein div-Element abdeckt, aber nur, wenn es möglich ist, die ursprünglichen Dimensionen beim Upscaling zu überschreiben?

Das zu verpixelten Bild zu verhindern. Object-fit 'cover' upscales sogar zu kleine Bilder. Und 'contain' schieben Sie nicht das Bild, um das div abzudecken.

Also, gibt es einen Weg, um zu erreichen, was ich will?

Edit:

scheint, dass auch 'contain' dass schlecht funktioniert. Das Bild wird auf die Kanten des übergeordneten Elements hochskaliert, auch wenn das Bild dadurch größer als das Original wird. Das ist verrückt ... oder?

Und ich versuche zu sehen, ob es möglich ist, zumindest Bildgrößen in Wordpress nur um das Seitenverhältnis, nicht eine genaue Größe hinzuzufügen. Ich möchte nur ändern, auf ein bestimmtes Verhältnis für das Bild zuschneiden. Das könnte zumindest ein bisschen helfen. Aber nein, dafür gibt es keine Funktion. Nur der Bild-Editor, den Sie nach dem Upload verwenden können ...

Wo ist das responsive Denken? Ist das Seitenverhältnis nicht die Zukunft, nicht Pixel?

Answer 1

ich ein bisschen recherchiert und können Sie diese Lösung bieten:

• Bild braucht ein Hintergrund-Bild
• eine feste Breite für die + background-size Auto
• (optional) Stellen werden Sie kann für die Ästhetik der Bildmitte In diesem Beispiel

die .img-container auch flexibel ist (20vh) und beschneidet das Bild, wenn es kleiner als 100px bekommt . Der feste Wert background-size verhindert, dass das Bild ebenfalls vergrößert wird.

erstellt ein jsFiddle die flexiblen Behälter

.img-container { 
 
    width: 60vh; 
 
    height: 60vh; 
 
    border: 2px solid #111; 
 

 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: 100px auto; 
 

 
    background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); 
 
}

<div class="img-container"></div>