Làm cách nào để giữ tỷ lệ cỡ ảnh của hình nền?

Question

Tôi đã cố gắng xem xét các câu trả lời khác nhưng không giúp đỡ. Nền của tôi là động nên kích thước của hình ảnh sẽ thay đổi, vì vậy tôi cần phải giữ tỷ lệ khung hình để toàn bộ hình ảnh được nhìn thấy. đây là CSS của tôi:

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

Tại thời điểm tùy thuộc vào hình ảnh, đôi khi rất nhiều của nó được cắt đứt. Tôi muốn hình ảnh được thu nhỏ để nó có thể được nhìn thấy đầy đủ. Bất kỳ ý tưởng?

Answer 1

Sử dụng background-size: cover; để trang trải toàn bộ phần tử, trong khi duy trì tỷ lệ khía cạnh:

.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

Sử dụng background-size:contain; nếu bạn muốn xem toàn bộ hình ảnh và kéo dài nó đến toàn bộ chiều rộng hoặc chiều cao (phụ thuộc vào tỷ lệ khung hình của hình ảnh) của div.

Nhưng nếu bạn muốn bao phủ toàn bộ div với hình nền và không nhớ hình ảnh bị cắt thì hãy sử dụng background-size:cover; để thay thế.

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