Yükseklik Zorlanır Arkaplan Resim ile Boş Div Need ve Duyarlı Olmalı

Question

aşağıdaki ihtiyacım

: içeriksiz

• Emtpy div
div
• arka plan görüntüsü olarak ayarlanmış
• arka plan görüntüsü akışkan olması/div üzerinde
• sabit boyutları seti edemez yeniden boyutuna duyarlı

denemek Her şey desteklemek için açık div zorlamak için başarısız arka plan resminin boyutu. Herhangi bir yardım büyük

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

Sen CSS

burada

#DivName{ 
    background-size: auto auto; 
    } 

birinci genişlik ve ikinci yükseklik içindir için otomatik olan

Answer 2

deneyin uygulandıktan sonra her şeyin üstesinden gelebilecek ... takdir Farklı sabit yüksekliklerde çalışmak için farklı ekran boyutları için CSS'nizde medie sorguları kullanmak. Örneğin :

@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; } 
    } 

vb özelleştirmek için gerekenleri. Tüm ekran ve arka plan boyutu için kapak genişliğini% 100 bırakabilirsiniz. Ayrıca, mobil veya tablet cihazlar için web sitenize daha az boyut vermek için her bir ekran boyutu için farklı boyutta arka planlar (farklı dosyalar) oluşturabilirsiniz.

Answer 3

Yüksekliğin en boy oranını sıvı genişliğine kilitlemenin yolu, padding-top veya padding-bottom yüzdesini kullanmaktır. Bunun nedeni, tüm doldurma yüzdelerinin öğe muhafazasının genişliğinden olmasıdır. Arka plan resminiz 960 x 520, yani yükseklik 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; 
} 

Örnek: http://jsfiddle.net/SsTZe/156/

Esasen aynı soru: CSS fluid image replacement?

Answer 4

bu sıvı yükseklikte divs oluşturmak için bir üst hakkında sonucu olduğu Genel olarak (sadece boş olanlar gibi değil

.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 */ 
}