Wie kann man die Div-Höhe automatisch an die Hintergrundgröße anpassen?

Wie kann ich ein Div automatisch an die Größe des Hintergrunds anpassen, den ich dafür festgelegt habe, ohne eine bestimmte Höhe (oder Mindesthöhe) dafür festzulegen?

Eine andere, möglicherweise ineffiziente Lösung wäre, das Bild unter ein imgElement zu setzen, das auf eingestellt ist visibility: hidden;. Dann machen Sie das background-imageder umgebenden Div gleich wie das Bild.

Dadurch wird das umgebende Div auf die Größe des Bilds im imgElement eingestellt, es wird jedoch als Hintergrund angezeigt.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Es gibt eine sehr schöne und coole Möglichkeit, ein Hintergrundbild wie ein imgElement wirken zu lassen, sodass es heightautomatisch angepasst wird. Sie müssen das Bild widthund das heightVerhältnis kennen. Setzen Sie den heightContainer auf 0 und den padding-topProzentsatz 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 erhalten, das genau wie ein img-Element funktioniert. Hier ist ein funktionierender Prototyp (Sie können die Größe ändern und die Div-Höhe überprüfen): http://jsfiddle.net/TPEFn/2/

Es gibt keine Möglichkeit, die Hintergrundbildgröße mithilfe von CSS automatisch anzupassen.

Sie können es 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 Javascript hacken, um die Größe des Div basierend auf der Bildgröße zu ändern (sobald das Bild heruntergeladen wurde) - dies ist im Grunde das Gleiche.

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

Diese Antwort ähnelt anderen, ist jedoch für die meisten Anwendungen insgesamt die beste. Sie müssen die Bildgröße vorher kennen, was Sie normalerweise tun. Auf diese Weise können Sie Overlay-Text, Titel usw. hinzufügen, ohne das Bild negativ aufzufüllen oder absolut zu positionieren. Der Schlüssel besteht darin, den Abstand% so einzustellen, dass er dem Bildseitenverhältnis entspricht, wie im folgenden Beispiel gezeigt. 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 dies helfen, es ist nicht gerade ein Hintergrund, aber Sie bekommen 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 dies hier unten nie zu sehen sein wird. Aber wenn Ihr Problem dasselbe war wie meins, 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 Mitte des Bildes haben, und das wird mir das erlauben.

Es gibt eine reine CSS-Lösung, die die anderen Antworten übersehen haben.

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

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

Dadurch ändert das div seine Höhe auf die tatsächliche Pixelgröße des Bildes. Um auch die Breite zu ändern, fügen Sie hinzu:

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

Sie können es serverseitig tun: indem Sie das Bild messen und dann die Div-Größe einstellen ODER das Bild mit JS laden, seine Attribute lesen und dann die DIV-Größe einstellen.

Und hier ist eine Idee: Fügen Sie dasselbe Bild als IMG-Tag in das Div ein, aber geben Sie ihm Sichtbarkeit: Versteckt + Spielen mit der relativen Position + Geben Sie diesem Div das Bild als Hintergrund.

Ich hatte dieses Problem und fand Hasanavis Antwort, aber ich bekam einen kleinen Fehler beim Anzeigen des Hintergrundbilds auf einem breiten Bildschirm - Das Hintergrundbild breitete sich nicht über die gesamte Breite des Bildschirms aus.

Hier ist meine Lösung - basierend auf Hasanavis Code, 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 bemerkt haben, background-size: contain;passt die Eigenschaft nicht gut in besonders breite Bildschirme, und die background-size: cover;Eigenschaft passt nicht gut auf mobile Bildschirme. Daher habe ich dieses @mediaAttribut verwendet, um mit den Bildschirmgrößen herumzuspielen und dieses Problem zu beheben.

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 reagiert, ohne das Seitenverhältnis des Hintergrundbilds zu verzerren, können Sie zuerst das Seitenverhältnis des Bildes berechnen und dann ein Div erstellen, das das Seitenverhältnis beibehält, indem Sie die folgenden Schritte ausführen ::

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.

Vielleicht kann dies helfen, 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>

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>

Wenn Sie das Verhältnis des Bildes zur Erstellungszeit kennen, die Höhe von der Fensterhöhe abhängen möchten und auf moderne Browser (IE9 +) abzielen , können Sie hierfür Ansichtsfenstereinheiten verwenden:

.width-ratio-of-height {
  overflow-x: scroll;
  height: 100vh;
  width: 500vh; /* width here is 5x height */
  background-image: url("http://placehold.it/5000x1000");
  background-size: cover;
}

Nicht ganz das, was das OP verlangte, aber wahrscheinlich gut für viele, die diese Frage sehen, und wollte hier eine andere Option geben.

Geige: https://jsfiddle.net/6Lkzdnge/

Angenommen, Sie haben so etwas:

<div class="content">
    ... // inner HTML
</div>

und Sie möchten einen Hintergrund hinzufügen, kennen aber die Dimension des Bildes nicht.

Ich hatte ein ähnliches Problem und löste es mithilfe des Rasters:

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z-indexdient nur zum platzieren von bild tatsächlich im hintergrund, man kann es natürlich img.backgroundüber dem platzierendiv.content .

HINWEIS : Dies kann dazu führen div.content, dass das Bild dieselbe Höhe hat. Wenn div.contentalso Kinder entsprechend ihrer Höhe platziert werden, möchten Sie möglicherweise eine Zahl festlegen, die nicht so gut wie "Auto" lautet.

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

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

Ich habe mich eine Weile 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 es Ihrem eigenen Selektor übergeben) und berechnet deren Hintergrundbildabmessungen. Alles was Sie tun müssen, ist diesen Code einzuschließen und die gewünschten Elemente mit class = "show" zu markieren

Genießen!

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

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 verkleinern. Es ist mehr reaktionsschnelles Layout.

Zum Beispiel. du hast

<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 ansprechendes Layout wünschen. Ich würde float nicht empfehlen. In bestimmten Fällen ist float in Ordnung zu verwenden. In den meisten Fällen vermeiden wir jedoch die Verwendung von float, da dies bei Cross-Browser-Tests eine Reihe von Auswirkungen hat.

Hoffe das hilft :)

Ich habe mir einige der Lösungen angesehen und sie sind großartig, aber ich denke, ich habe einen überraschend einfachen Weg gefunden.

Zuerst müssen wir das Verhältnis aus dem Hintergrundbild erhalten. Wir teilen einfach eine Dimension durch eine andere. Dann bekommen wir so etwas wie zum Beispiel 66,4%

Wenn wir ein Bildverhältnis haben, können wir einfach die Höhe des Div berechnen, indem wir das Verhältnis mit der Breite des Ansichtsfensters multiplizieren:

height: calc(0.664 * 100vw);

Für mich funktioniert es, stellt die Div-Höhe richtig ein und ändert sie, wenn die Fenstergröße geändert wird.

Eigentlich ist es ganz einfach, wenn man weiß, wie es geht:

<section data-speed='.618' data-type='background' style='background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>

Der Trick besteht lediglich darin, das eingeschlossene Div als normales Div mit den gleichen Dimensionswerten wie die Hintergrunddimensionswerte (in diesem Beispiel 100% und 40 VW) festzulegen.

Ich habe das mit jQuery gelöst. Bis neue CSS-Regeln diese Art von Verhalten nativ zulassen, finde ich, dass dies der beste Weg ist, dies zu tun.

Richten Sie Ihre Divs ein

Unten haben Sie Ihr Div, auf dem der Hintergrund erscheinen soll ("Held") und dann den inneren Inhalt / Text, den Sie über Ihr Hintergrundbild legen möchten ("inner"). Sie können (und sollten) die Inline-Stile in Ihre Heldenklasse verschieben. Ich habe sie hier gelassen, damit schnell und einfach zu sehen ist, welche Stile darauf angewendet werden.

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

Berechnen Sie das Bildseitenverhältnis

Berechnen Sie als Nächstes Ihr Seitenverhältnis für Ihr Bild, indem Sie die Höhe Ihres Bildes durch die Breite dividieren. Wenn Ihre Bildhöhe beispielsweise 660 und Ihre Breite 1280 beträgt, beträgt Ihr Seitenverhältnis 0,5156.

Richten Sie ein Ereignis zum Ändern der Größe eines jQuery-Fensters ein, um die Höhe anzupassen

Fügen Sie abschließend einen jQuery-Ereignis-Listener für die Fenstergröße hinzu, berechnen Sie die Größe Ihres Heldendivs anhand des Seitenverhältnisses und aktualisieren Sie sie. Diese Lösung hinterlässt aufgrund unvollständiger Berechnungen unter Verwendung des Seitenverhältnisses normalerweise ein zusätzliches Pixel am unteren Rand, sodass wir der resultierenden Größe ein -1 hinzufügen.

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

Stellen Sie sicher, dass es beim Laden der Seite funktioniert

Sie sollten den obigen Aufruf zum Ändern der Größe ausführen, wenn die Seite geladen wird, damit die Bildgrößen zu Beginn berechnet werden. Wenn Sie dies nicht tun, wird das Heldendiv erst angepasst, wenn Sie die Fenstergröße ändern. Ich habe eine separate Funktion eingerichtet, um die Größenanpassungen vorzunehmen. Hier ist der vollständige Code, den ich verwende.

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

Wenn Sie in Photoshop ein Bild erstellen können, bei dem die Hauptebene eine Deckkraft von etwa 1 hat und im Grunde genommen transparent ist, fügen Sie dieses Bild in das Div ein und machen Sie das reale Bild zum Hintergrundbild. DANN setzen Sie die Deckkraft des Bildes auf 1 und fügen Sie die gewünschten Größenmaße hinzu.

Das Bild wird auf diese Weise erstellt, und Sie können das unsichtbare Bild nicht einmal von der coolen Seite ziehen.

einfach hinzufügen div

style="overflow:hidden;"