CSS nền sử dụng "background-kích thước: bìa" không phù hợp với toàn bộ chiều cao

Question

Tôi đang thực hiện một trang đó sẽ chỉ hiển thị một hình ảnh SVG, và đây là những yêu cầu:

• vector nên lên toàn bộ cửa sổ
• vector nên duy trì tỷ lệ khía cạnh của nó (được định nghĩa trong file SVG chính nó)
• vector nên cắt/clip trong trật tự để ngăn chặn lệch

CSS ...

body { 
    background: url(/path/to/image.svg); 
    background-size: cover; 
} 

... hoạt động hoàn toàn trừ khi cửa sổ trình duyệt trở nên quá hẹp, thay vì cắt xén/cắt bớt.

Dưới đây là một số ảnh chụp màn hình (xin vui lòng bỏ qua những hiện vật còn lại bởi dabblet):

Ở đây cửa sổ là gần với tỉ lệ của ảnh gốc

Ở đây cửa sổ là "ngắn hơn "so với tỷ lệ cỡ ảnh và hình ảnh đang cắt xén (như mong muốn).

Ở đây cửa sổ "hẹp hơn" so với tỷ lệ khung hình, nhưng thay vì cắt xén, hình ảnh bị ốp lát (không mong muốn).

Dưới đây là một vài suy nghĩ rằng tôi đã có ...

• Tôi có thể thay đổi hình ảnh SVG trong một số cách để ngăn chặn điều này xảy ra?
• Tôi có thể đánh dấu/tạo kiểu trang để đạt được kết quả mong muốn không?
• Tôi muốn giữ trong lĩnh vực HTML/CSS, nhưng nếu Javascript là cần thiết, sau đó là như vậy.

Đây là dabblet mà tôi đã làm việc với ... http://dabblet.com/gist/6033198

Answer 1

Sau một số thử nghiệm và báo lỗi, đây là những gì tôi tìm thấy.

Thêm (với CSS gốc):

html { 
    height: 100% 
} 

giao chính xác những gì tôi đang tìm kiếm trong spec gốc.

Thêm vào đó, nếu tôi muốn hình ảnh là trung tâm khi nó được cắt, tôi có thể sử dụng:

html { 
    background: url(path/to/image.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 

Cuối cùng, nếu tôi muốn nó được làm trung tâm, luôn duy trì tỷ lệ khía cạnh, nhưng không được cắt xén (ví dụ, một số khoảng trắng là OK) sau đó tôi có thể làm:

body { 
    background: url(/path/to/image.svg) no-repeat center center fixed; 
    background-size: contain; 
} 

Answer 2

css Đây là working.Thanks

"background-size: contain;" 

.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;} 

<div class="cover">&nbsp;</div>