Müssen Leere Div Mit Background-Image Zu Zwingen Höhe und Muss reagiert Werden

Brauche ich die folgenden:

  • leere div ohne Inhalt
  • Hintergrundbild gesetzt, um den div der
  • Hintergrundbild fluid/responsive auf die Größe kann ich nicht fest
  • Abmessungen für die div -

Alles was ich Versuch scheitert, Kraft der div-open zur Unterstützung der Größe des Hintergrundbilds. 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; }
  • Ich wäre bereit zu sehen, Ihre Bemühungen. Pls post ein JSfiddle-link von Ihrer Arbeit und einen screenshot von der Ausgabe, die Sie wollen.
  • Hinzugefügt link zu der Website und code-snippet oben.
  • Hintergrund wird sein, nach der Größe der Div. Also, wenn Sie die Größe Ihrer div nicht festlegen, dann die backgroud-Bild zeigt, wie pro die Größe der div.
  • Ich kann nicht die Größe des DIV-weil ich es brauche, zu reagieren...irgendwelche Vorschläge?
  • Dir können siehe die Antwort von here in diesem Fall müssen Sie die Höhe und Breite des Bildes beim laden und festlegen müssen, müssen die div-Größe.
  • Ich bin nicht sicher, ob ich Folgen...kannst du es mir wirklich einfach, wie 101-Stil, weil das macht für mich keinen Sinn. Und nicht onload bedeutet, dass, sobald es lädt es gesetzt ist, oder wird es zusammenbrechen, die anmutig auf browser-neu-Größe?

InformationsquelleAutor user1447958 | 2013-05-15
  1. 31

    Den Weg zu sperren, die Höhe, das Seitenverhältnis, um es fluid Breite, ist die Verwendung padding-top oder padding-bottom Prozentsatz. Dies ist, weil alle Polsterung Prozentsätze der das element container-Breite. Dein hintergrund Bild ist 960 x 520, also die Höhe ist 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-flüssiges Bild-Ersatz?

    • wo bekommt man 54.166666666667% für padding-top?
    • 520/960
    • Dies ist eine hervorragende Technik, die umgeht das problem, dass Sie ausdrücklich die Höhe. Mehr als nur zu sagen, danke--ich will auch ziehen die Aufmerksamkeit anderer dieser Antwort.
    • Dies sollte die akzeptierte Antwort. Danke Gewähr Whipple
    InformationsquelleAutor Warren Whipple
  2. 1

    Sie verarbeiten kann es nach der Anwendung von CSS 

     #DivName{
  background-size: auto auto;
     }

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

    • auto funktioniert nicht...leere div mit div keine Höhe noch reduziert wird.
    • Sie dies ist der Teil der browser-rendering. können Sie fügen Sie ein Leerzeichen "&nbsp; " auf Sie div. Ich denke, es wird funktionieren.
    • Lassen Sie mich wissen, wenn Sie den Erfolg?
    InformationsquelleAutor Sandeep Kumar
  3. 0

    Versuchen, medie queries in der CSS für verschiedene Bildschirm-Größen für den Umgang mit verschiedenen festen Höhen.
    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; } 
    }

    etc. was Sie brauchen, um Sie anzupassen. Sie können die div-Breite 100% passen für alle Bildschirm und die background-size:cover. Sie können auch verschiedene Größe Hintergründen (diff. Dateien) für jeden Bildschirm-Größen geben weniger Größe, um Ihre website für den mobilen oder tablet-Geräte.

    • ich meinte "Medien" natürlich sorry für die misstype
    InformationsquelleAutor danielnagy
  4. 0

    Da dies ein top-google-Ergebnis für das erstellen von fluid-Höhe divs im Allgemeinen (nicht nur leer, so wie die Frage gibt), ich wollte eine CSS-Calc-Lösung, die Ihnen ermöglicht, Inhalt in den div (der Polsterung trick zwingt Sie leer zu sein):

    .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 */
}
    • tut calc-arbeiten auf allen Browsern jetzt, weil ich bisher vermieden ihm für die mangelnde Unterstützung?
    • Ziemlich gute Abdeckung im calc in diesen Tagen, außer für opera mini: caniuse.com/#search=calc
    InformationsquelleAutor David Bodow
Schreibe einen Kommentar