web-dev-qa-db-ger.com

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

Wie kann ich erreichen, dass sich ein div automatisch an die Größe des Hintergrunds anpasst, den ich für ihn eingestellt habe, ohne eine bestimmte Höhe (oder min-Höhe) für ihn festzulegen?

220
JohnIdol

Eine andere, möglicherweise ineffiziente Lösung wäre, das Bild in ein img -Element zu setzen, das auf visibility: hidden; gesetzt ist. Dann machen Sie den background-image des umgebenden div mit dem Bild identisch.

Dadurch wird das umgebende div auf die Größe des Bildes im img-Element festgelegt, 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>
222
Tmac

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/

470
Hasanavi

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.

31
Orion Edwards

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>

18
horsejockey

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>
13
Luca Matteis

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.

9
Carpk

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;
}
7
Bernie Sumption

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.

5
martin schwartz

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/

3
JosephMCasey

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. 

2
Headache

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>
1
Mas

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>
1
Engr

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"
0
Chris Halcrow

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 :)

0
FaridAvesko

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

0
Tomer Almog