背景イメージの縦横比を維持する方法は？

Question

私は他の答えを見ようとしましたが、助けがありませんでした。背景がダイナミックなので、画像のサイズが変わるので、画像全体が見えるように縦横比を維持する必要があります。それが切断されるのたくさん時々、画像に応じた瞬間

.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"> 

：ここに私のCSSです。私はそれが完全に見ることができるように画像を縮小したい。何か案が？アスペクト比を維持したまま

Answer 1

使用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://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

使用background-size:contain;あなたは画像全体を見ると、完全な幅または高さにそれを伸ばしたい場合（画像のアスペクト比によって異なります）。

しかし、div全体を背景画像で覆い、画像が切り抜かれても構わない場合は、代わりに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">