Background-size: bao gồm không nhân rộng hình ảnh trong div

Question

Tôi có bốn kích thước bằng nhau của div thiết lập như thế này:

<div id="top-left"></div> 
<div id="top-right"></div> 
<div id="bottom-left"></div> 
<div id="bottom-right"></div> 

Mỗi là 50% chiều rộng của trang và vị trí hoàn toàn. Như thế này, ví dụ:

#top-right { 
position: absolute; 
top: 0px; 
left: 50%; 
width: 50%; 
height: 50%; 
} 

Vấn đề là khi tôi cố gắng chia tỷ lệ hình ảnh lớn (lớn) qua bìa CSS3. Đây là hình ảnh nền css tôi có cho đến nay:

background: #000 url('DSC01992.jpg') center center fixed no-repeat; 
background-size: cover; 
-moz-background-size: cover; 
-o-(etc.) 

Dưới đây là một ví dụ sống: http://jsfiddle.net/TqQv7/

Nếu bạn mở hình ảnh giữ chỗ ở đây: http://placekitten.com/2000/1000 bạn sẽ thấy rằng hình ảnh không được thu nhỏ lại một cách chính xác.

Tôi có thiếu gì đó không?

Answer 1

Xóa background-position và background-attachment các phần trong tuyên bố ngắn background ngắn tay của bạn sẽ cung cấp cho bạn kết quả mong muốn.

Thay đổi:

background: #000 url('http://placekitten.com/2000/1000') center center fixed no-repeat; 

Để:

background: #000 url('http://placekitten.com/2000/1000') no-repeat; 

Đây là một bản demo: http://jsfiddle.net/TqQv7/1/

Sử dụng background-position vàbackground-attachment cùng với background-size : cover được chống trực quan, bạn đang nói trình duyệt thực hiện hai việc khác nhau ở đó và có vẻ như các trình duyệt hiện đại vẫn mặc định theo phương pháp cũ hơn là các phương pháp mới.

Để biết thêm thông tin về hãy cẩn thận về background-size trả phòng các tài liệu MDN: https://developer.mozilla.org/en-US/docs/CSS/background-size