Wie kann man die Höhe des DIVs automatisch an die Hintergrundgröße anpassen?

Es gibt eine sehr schöne und coole Möglichkeit, ein Hintergrundbild wie ein img-Element zu gestalten, sodass es seine height automatisch anpasst. Sie müssen das Bildverhältnis width und height kennen. Setzen Sie die Variable height des Containers auf 0 und setzen Sie den padding-top als Prozentsatz basierend auf dem Bildverhältnis.

Es wird wie folgt aussehen:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Sie haben gerade ein Hintergrundbild mit automatischer Höhe, das wie ein img-Element funktioniert. Hier ist ein funktionierender Prototyp (Sie können die Größe des Dings ändern und überprüfen): http://jsfiddle.net/TPEFn/2/

Es gibt keine Möglichkeit zur automatischen Anpassung der Hintergrundbildgröße mit CSS.

Sie können ihn umgehen, indem Sie das Hintergrundbild auf dem Server messen und diese Attribute dann auf das div anwenden, wie andere bereits erwähnt haben.

Sie können auch etwas Javascript einhacken, um die Größe des DIVs basierend auf der Bildgröße zu ändern (nachdem das Bild heruntergeladen wurde).

Wenn Sie Ihr Div benötigen, um das Bild automatisch anzupassen, frage ich mich, warum Sie nicht einfach einen <img>-Tag in Ihr Div einfügen.

Diese Antwort ähnelt anderen, ist aber für die meisten Anwendungen insgesamt die beste Lösung. Sie müssen die Bildgröße vorher kennen, die Sie normalerweise tun. Auf diese Weise können Sie Overlay-Text, Titel usw. hinzufügen, ohne dass ein negatives Auffüllen oder eine absolute Positionierung des Bildes erforderlich ist. Sie müssen den Abstand% so einstellen, dass er dem Bildseitenverhältnis des Bildes entspricht (siehe Beispiel unten). Ich habe diese Antwort verwendet und im Wesentlichen nur einen Bildhintergrund hinzugefügt.

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

<div class="wrapper">
  <div class="main">
    This is where your overlay content goes, titles, text, buttons, etc.
  </div>
</div>

Vielleicht kann das helfen, es ist nicht gerade ein Hintergrund, aber Sie haben die Idee:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

Ich bin mir ziemlich sicher, dass das hier unten nie zu sehen ist. Aber wenn Ihr Problem dasselbe wie meines war, war dies meine Lösung:

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

Ich wollte ein div in der Bildmitte haben, und das wird mir das erlauben.

Es gibt eine reine CSS-Lösung, die den anderen Antworten entgangen ist.

Die Eigenschaft "content:" wird hauptsächlich zum Einfügen von Textinhalten in ein Element verwendet, kann aber auch zum Einfügen von Bildinhalten verwendet werden.

.my-div:before {
    content: url("image.png");
}

Dies führt dazu, dass das div seine Höhe an die tatsächliche Pixelgröße des Bildes anpasst. Um auch die Breite zu ändern, fügen Sie Folgendes hinzu:

.my-div {
    display: inline-block;
}

Ich hatte dieses Problem und fand Hasanavis Antwort, aber ich bekam einen kleinen Fehler, wenn das Hintergrundbild auf einem großen Bildschirm angezeigt wurde. Das Hintergrundbild breitete sich nicht über die gesamte Breite des Bildschirms aus.

Hier ist meine Lösung - basierend auf dem Code von Hasanavi, aber besser ... und dies sollte sowohl auf extra breiten als auch auf mobilen Bildschirmen funktionieren.

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

Wie Sie vielleicht schon bemerkt haben, passt die Eigenschaft background-size: contain; nicht besonders gut in extra breite Bildschirme. Die Eigenschaft background-size: cover; passt nicht gut auf mobile Bildschirme. Daher habe ich dieses Attribut @media verwendet, um mit den Bildschirmgrößen herumzuspielen und dieses Problem zu beheben.

Sie können dies serverseitig tun: Indem Sie das Bild messen und dann die Div-Größe einstellen, OR das Bild mit JS laden, die Attribute lesen und dann die DIV-Größe einstellen.

Und hier ist eine Idee, dasselbe Bild wie ein IMG-Tag in das div einzufügen, es jedoch sichtbar zu machen: hidden + play with position relative + + geben dieses div als Hintergrund aus.

Wie wäre es damit :)

.fixed-centered-covers-entire-page{
    margin:auto;
    background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
    background-repeat: no-repeat;background-size:cover;
    background-position: 50%;
    background-color: #fff;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
    position:fixed;
}

<div class="fixed-centered-covers-entire-page"></div>

Demo:http://jsfiddle.net/josephmcasey/KhPaF/

Wenn es sich um ein einzelnes vorbestimmtes Hintergrundbild handelt und Sie möchten, dass das div anspricht, ohne das Seitenverhältnis des Hintergrundbilds zu verzerren, können Sie zunächst das Seitenverhältnis des Bildes berechnen und anschließend ein div erstellen, das sein Seitenverhältnis beibehält : 

Angenommen, Sie möchten ein Seitenverhältnis von 4: 1 und die Breite des Div beträgt 32%: 

div {
  width: 32%; 
  padding-bottom: 8%; 
}

Dies ergibt sich aus der Tatsache, dass die Auffüllung basierend auf der Breite des enthaltenden Elements berechnet wird. 

Sie können so etwas tun

<div style="background-image: url(http://your-image.jpg); position:relative;">
 <img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>

Vielleicht hilft das, es ist nicht gerade ein Hintergrund, aber Sie bekommen die einfache Idee

    <style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>

Hatte dieses Problem mit dem Umbraco-CMS und in diesem Szenario können Sie das Bild zum div hinzufügen, indem Sie etwas für das 'style'-Attribut des div verwenden:

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

Die beste Lösung, die ich mir vorstellen kann, ist die Angabe Ihrer Breite und Höhe in Prozent. Auf diese Weise können Sie Ihren Bildschirm basierend auf Ihrer Monitorgröße neu skalieren. mehr von responsive layout .. 

Für eine Instanz ... haben Sie

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

Dies ist die beste Option, wenn Sie ein responsives Layout wünschen, ich würde Float nicht empfehlen. In bestimmten Fällen ist Float in Ordnung. In den meisten Fällen vermeiden wir jedoch die Verwendung von Float, da dies eine Reihe von Faktoren beeinflusst, wenn Sie Browserübergreifend testen.

Hoffe das hilft :)

Ich habe mich seit einiger Zeit mit diesem Problem befasst und beschlossen, ein Jquery-Plugin zu schreiben, um dieses Problem zu lösen .. Dieses Plugin findet alle Elemente mit der Klasse "show-bg" (oder Sie können Ihre eigene Auswahl übergeben) und Berechnen Sie die Dimensionen des Hintergrundbildes . Sie müssen nur diesen Code einfügen, die gewünschten Elemente mit class = "show" markieren

Genießen!

https://bitbucket.org/tomeralmog/jquery.heightfrombg