Need Empty Div z tłem obrazu Aby wymusić wysokość i musi reagować

Question

muszę następujące:

• emtpy div bez zawartości
• tła ustawiony na div obrazu
• tła, płyn/reagujący na re-size nie można ustawić stałe
• wymiary na div

Wszystko staram się nie powiedzie, aby wymusić div otwarty do wsparcia rozmiar obrazu tła. Każda pomoc jest mile widziana ...

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

można obsługiwać go po zastosowaniu CSS

#DivName{ 
    background-size: auto auto; 
    } 

tutaj pierwsze auto jest na szerokość i drugi jest na wysokości

Answer 2

Try używać zapytań medie w twoim CSS dla różnych rozmiarów ekranu do obsługi różnych stałych wysokości. Na przykład:

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

itd. To, co musisz dostosować. Możesz pozostawić szerokość div 100%, aby pasowała do wszystkich ekranów i tła: wielkość okładki. Możesz także tworzyć tła o różnych rozmiarach (różne pliki) dla każdego rozmiaru ekranu, aby zmniejszyć rozmiar witryny dla urządzeń mobilnych lub tabletów.

Answer 3

Sposób na zablokowanie współczynnika proporcji wysokości do szerokości płynu to użycie wartości procentowej padding-top lub padding-bottom. Dzieje się tak, ponieważ wszystkie procentowe wypełnienia odpowiadają szerokości kontenera elementu. Twój obraz tła to 960 x 520, a więc wysokość 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; 
} 

przykład: http://jsfiddle.net/SsTZe/156/

Zasadniczo takie same pytanie CSS fluid image replacement?

Answer 4

Ponieważ jest głównym wynikiem pomocną do tworzenia płynu wysokość div ogólnie (nie tylko puste, takie jak Określa się pytanie), chciałem zostawić CSS Calc rozwiązanie, które pozwala umieścić zawartość do div (padding siły sztuczka, że ​​jest pusty):

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