Hình nền CSS - thu nhỏ để vừa với kích thước cố định div

Question

Tôi có mã sau tại https://jsfiddle.net/ncrcfduz và hình nền tại https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. Tôi cần phải làm cho hình ảnh nền rescale để phù hợp trong div, ưa thích để hiển thị hầu hết các "trung tâm" nội dung trong hình ảnh. Đoạn mã sau chỉ hiển thị góc trên cùng bên trái của hình ảnh.

.container { 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 150px; 
 
    width: 300px; 
 
}

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

Answer 1

Bạn đang tìm kiếm background-size: contain (see the css-tricks' entry), không cover. Để có được ví dụ của bạn để làm việc, bạn sẽ phải thả background-attachment: fixed. Sử dụng background-position: center để căn giữa nền trong div của bạn.

.container{ 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: contain; 
 
    
 
    height: 150px; 
 
    width: 300px; 
 
}

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

Answer 2

Bạn chỉ cần thay thế "cố định" bởi "trung tâm" về hướng dẫn "nền" của bạn.

Giống như rằng:

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; 

JSFiddle đây: https://jsfiddle.net/ncrcfduz/2/

Answer 3

bạn nên sử dụng:

.container{ 
    background-size: 100%; 
}