Cần Rỗng Div Với Background Image Để Buộc Chiều cao và Must Be Responsive

Question

tôi cần những điều sau đây:

• div emtpy không có nội dung
ảnh
• nền thiết lập để div hình ảnh
• nền là chất lỏng/đáp ứng về tái kích thước tôi không thể thiết lập cố định
• kích thước trên div

Tất cả những gì tôi cố gắng không để buộc các div mở để hỗ trợ kích thước của hình nền. Any help is appreciated rất ...

http://www.everymountain.us/

<header id="header"> 
<div class="wrapper"> 
<div class="inner"> 
<div class="top_banner"></div> 
</div> 
<div class="clear"></div> 
</div> 
</header> 

.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat; background-size: cover; } 

Answer 1

Bạn có thể xử lý nó sau khi áp dụng CSS

#DivName{ 
    background-size: auto auto; 
    } 

đây đầu tiên tự động là cho chiều rộng và thứ hai là cho chiều cao

Answer 2

Thử để sử dụng truy vấn medie trong CSS của bạn cho các kích thước màn hình khác nhau để xử lý các độ cao cố định khác nhau. Ví dụ:

@media (min-width: 1200px) { 
    div { height: 3em; } 
} 
@media (min-width: 768px) and (max-width: 979px) { 
    div { height: 2em; } 
} 
@media (max-width: 767px) { 
    div { height: 1.2em; } 
} 
@media (max-width: 480px) { 
    div { height: 1em; } 
    } 

v.v ... những gì bạn cần tùy chỉnh. Bạn có thể để chiều rộng div 100% cho vừa với tất cả màn hình và kích thước nền: bìa. Bạn cũng có thể tạo các hình nền kích thước khác nhau (các tệp khác nhau) cho mỗi kích thước màn hình để cung cấp ít kích thước hơn cho trang web của bạn cho thiết bị di động hoặc máy tính bảng.

Answer 3

Cách để khóa tỷ lệ khung hình của chiều cao với chiều rộng của chất lỏng là sử dụng tỷ lệ phần trăm padding-top hoặc padding-bottom. Điều này là do tất cả tỷ lệ phần trăm đệm là chiều rộng của vùng chứa phần tử. Hình nền của bạn là 960 x 520, vì vậy chiều cao là 54.166666666667%.

html

<div class="top_banner"></div> 

css

.top_banner { 
    background-image: url('images/bg_front.jpg'); 
    background-size: 100%; 
    width: 100%; 
    padding-top: 54.166666666667%; 
    height: 0; 
} 

Ví dụ: http://jsfiddle.net/SsTZe/156/

Về cơ bản cùng một câu hỏi: CSS fluid image replacement?

Answer 4

Do đây là một kết quả google hàng đầu cho việc tạo ra các div chất lỏng chiều cao nói chung (không chỉ những cái trống rỗng như câu hỏi chỉ định), tôi muốn để lại giải pháp CSS Calc cho phép bạn đặt nội dung vào div (mẹo đệm buộc nó phải trống):

.my-div { 
    background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0; 
    background-size: 100% auto; 
    width: calc(100vw - 350px); 
    height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height/width aspect ratio */ 
}