Wie wird das Seitenverhältnis eines Hintergrundbildes beibehalten?

Question

Ich habe versucht, andere Antworten zu suchen, aber keine Hilfe. Mein Hintergrund ist dynamisch, so dass sich die Größe der Bilder ändert. Daher muss das Seitenverhältnis beibehalten werden, damit das gesamte Bild angezeigt wird. hier ist mein CSS:

.image_submit_div { 
    border: 1px solid #ccc; 
    display: inline-block; 
    padding: 20px 50px; 
    width: 55%; 
    height: 320px; 
    cursor: pointer; 
    background: url('something.jpg'); /* this changes */ 
    margin: 0 0 25px; 

}

html

<label for="id_image" class="image_submit_div"> 

Im Moment auf das Bild abhängig, manchmal viel davon abgeschnitten wird. Ich möchte, dass das Bild verkleinert wird, damit es vollständig gesehen werden kann. Irgendeine Idee?

Answer 1

Verwenden background-size: cover; das gesamte Element zu bedecken, während das Seitenverhältnis beibehalten:

.image_submit_div { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 20px 50px; 
 
    width: 55%; 
 
    height: 320px; 
 
    cursor: pointer; 
 
    background: url('http://lorempizza.com/500/500'); 
 
    background-size: cover; 
 
    /* Or use the background shorthand */ 
 
    background: url('http://lorempizza.com/500/500') scroll no-repeat center/cover; 
 
    margin: 0 0 25px; 
 
}

<div class="image_submit_div"></div>

Answer 2

Verwenden background-size:contain;, wenn Sie das ganze Bild sehen wollen und es auf die volle Breite oder Höhe strecken (hängt vom Seitenverhältnis des Bildes ab) des div.

Aber wenn Sie das ganze div mit dem Hintergrundbild abdecken möchten und das Bild nicht beschnitten wird, verwenden Sie stattdessen background-size:cover;.

.image_submit_div { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 20px 50px; 
 
    width: 55%; 
 
    height: 320px; 
 
    cursor: pointer; 
 
    background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */ 
 
    margin: 0 0 25px; 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
    background-size:contain; 
 
}

<label for="id_image" class="image_submit_div">