Benötigen Leere Div mit Hintergrund Bildhöhe Gewalt und muss reagieren

Question

Ich brauche den folgenden:

• emtpy div ohne Inhalt
• Hintergrundbild zum div des
• Hintergrundbild gesetzt Flüssigkeit sein/in Reaktion auf die Größe neu bestimmen kann ich nicht
• Dimensionen auf dem div versagt ich versuche

Alles festen Satz das div zu zwingen, offen zu unterstützen, die Größe des Hintergrundbildes. Jede Hilfe wird sehr geschätzt ...

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

Sie damit umgehen kann nach CSS Anwendung

#DivName{ 
    background-size: auto auto; 
    } 

hier erste Auto ist für die Breite und die zweite für die Höhe ist

Answer 2

Try Verwenden von medie-Abfragen in Ihrem CSS für verschiedene Bildschirmgrößen, um verschiedene feste Höhen zu handhaben. Zum Beispiel:

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

usw., was Sie anpassen müssen. Sie können die div Breite 100% für den gesamten Bildschirm und die Hintergrundgröße belassen: cover. Sie können für jede Bildschirmgröße auch Hintergrundbilder unterschiedlicher Größe (diff. Dateien) erstellen, um Ihrer Website eine geringere Größe für mobile oder Tablet-Geräte zu geben.

Answer 3

Die Art und Weise der Höhe einer Seitenverhältnis zu sperren, um es Flüssigkeit Breite padding-top oder padding-bottom Prozentsatz zu nutzen. Dies liegt daran, dass alle Füllprozentsätze der Breite des Elementcontainers entsprechen. Ihr Hintergrundbild ist 960 x 520, also ist die Höhe 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; 
} 

Beispiel: http://jsfiddle.net/SsTZe/156/

im Wesentlichen die gleiche Frage: CSS fluid image replacement?

Answer 4

Da dies ein oben Google Ergebnis ist fluid-Höhe divs zum Erstellen im Allgemeinen (nicht nur leere wie die Frage spezifiziert), wollte ich eine CSS-Calc-Lösung verlassen, die Sie (die Polsterung Trick Kräfte es) leer sein den gesamten Inhalt in den div lässt:

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