Hình nền CSS Div Chiều cao cố định Chiều rộng 100%

Question

Tôi đang cố gắng thiết lập một loạt ảnh div có hình nền mà mỗi ảnh có chiều cao cố định riêng và kéo dài để lấp đầy chiều rộng, ngay cả khi có tràn trên đầu/bottom được cắt bớt. Tôi chỉ không muốn không gian màu trắng trên các cạnh.

Hiện nay, tôi có: http://jsfiddle.net/ndKWN/

CSS

#main-container { 
     float:left; 
     width:100%; 
     margin:0; 
     padding:0; 
     text-align: center; 
    } 

    .chapter{ 
     position: relative; 
     height: 1400px; 
     z-index: 1; 
    } 

    #chapter1{ 
    background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed; 
     height:1200px; 
    } 

    #chapter2{ 
    background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed; 
     height:1200px; 
    } 

Answer 1

Xem câu trả lời của tôi đến một câu hỏi tương tự here.

Có vẻ như bạn muốn có hình nền để giữ tỷ lệ khung hình riêng trong khi mở rộng tới 100% chiều rộng và bị cắt ở trên cùng và dưới cùng. Nếu đó là trường hợp, làm một cái gì đó như thế này:

.chapter { 
    position: relative; 
    height: 1200px; 
    z-index: 1; 
} 

#chapter1 { 
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    background-position: center top; 
    background-attachment: fixed; 
} 

jsfiddle: http://jsfiddle.net/ndKWN/3/

Vấn đề với phương pháp này là bạn có các yếu tố container tại một chiều cao cố định, vì vậy có thể có khoảng trống dưới đây nếu màn hình đủ nhỏ.

Nếu bạn muốn chiều cao giữ tỷ lệ co của hình ảnh, bạn sẽ phải làm điều gì đó giống như những gì tôi đã viết trong bản chỉnh sửa cho câu trả lời tôi đã liên kết ở trên. Đặt của container height 0 và thiết lập các padding-bottom với tỷ lệ chiều rộng:

.chapter { 
    position: relative; 
    height: 0; 
    padding-bottom: 75%; 
    z-index: 1; 
} 

#chapter1 { 
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    background-position: center top; 
    background-attachment: fixed; 
} 

jsfiddle: http://jsfiddle.net/ndKWN/4/

Bạn cũng có thể đưa tỷ lệ padding-bottom vào mỗi phong cách #chapter nếu mỗi hình ảnh có tỷ lệ khía cạnh khác nhau . Để sử dụng các tỷ lệ khung hình khác nhau, hãy chia chiều cao của hình ảnh ban đầu theo chiều rộng của chính nó và nhân với 100 để nhận giá trị phần trăm.

Answer 2

http://jsfiddle.net/ndKWN/1/

Bạn có thể sử dụng background-size: cover;

Answer 3

Nhưng vấn đề là rằng lớp .chapter là không năng động bạn đang tuyên bố một height: 1200px

do đó, nó tốt hơn để sử dụng nền: bìa và thiết lập với các truy vấn phương tiện cụ thể chiều cao cho độ phân giải phổ biến.