Come ottenere l'altezza div per adattarsi automaticamente alle dimensioni dello sfondo?

Come faccio a ottenere un div per adattarsi automaticamente alle dimensioni dello sfondo impostato per esso senza impostare un'altezza specifica (o altezza minima) per esso?

Un'altra soluzione, forse inefficiente, sarebbe quella di includere l'immagine in un imgset di elementi visibility: hidden;. Quindi rendere il background-imagediv circostante uguale all'immagine.

Ciò imposterà il div circostante alla dimensione dell'immagine imgnell'elemento ma lo visualizzerà come sfondo.

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

C'è un modo molto bello e interessante per far funzionare un'immagine di sfondo come un imgelemento in modo che si adatti heightautomaticamente. Devi conoscere l'immagine widthe il heightrapporto. Impostare il valore heightdel contenitore su 0 e impostare la padding-toppercentuale in base al rapporto immagine.

Sarà simile al seguente:

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

Hai appena ottenuto un'immagine di sfondo con altezza automatica che funzionerà proprio come un elemento img. Ecco un prototipo funzionante (puoi ridimensionare e controllare l'altezza div): http://jsfiddle.net/TPEFn/2/

Non è possibile regolare automaticamente le dimensioni dell'immagine di sfondo tramite CSS.

Puoi hackerarlo misurando l'immagine di sfondo sul server e quindi applicando tali attributi al div, come altri hanno già detto.

Puoi anche hackerare un po 'di javascript per ridimensionare il div in base alla dimensione dell'immagine (una volta che l'immagine è stata scaricata) - questa è sostanzialmente la stessa cosa.

Se hai bisogno del tuo div per adattare automaticamente l'immagine, potrei chiederti perché non metti solo un <img>tag all'interno del tuo div?

Questa risposta è simile ad altre, ma nel complesso è la migliore per la maggior parte delle applicazioni. È necessario conoscere prima la dimensione dell'immagine che di solito si fa. Ciò ti consentirà di aggiungere testo sovrapposto, titoli ecc. Senza imbottitura negativa o posizionamento assoluto dell'immagine. Il loro tasto è impostare la percentuale di riempimento in modo che corrisponda alle proporzioni dell'immagine come nell'esempio seguente. Ho usato questa risposta ed essenzialmente ho appena aggiunto uno sfondo di immagine.

.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>

Forse questo può aiutare, non è esattamente uno sfondo, ma hai l'idea:

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

Abbastanza sicuro che questo non sarà mai stato visto fin qui. Ma se il tuo problema era lo stesso del mio, questa era la mia soluzione:

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

Volevo avere un div al centro dell'immagine, e questo mi permetterà di farlo.

Esiste una soluzione CSS pura che le altre risposte hanno perso.

La proprietà "content:" viene utilizzata principalmente per inserire il contenuto del testo in un elemento, ma può anche essere utilizzata per inserire il contenuto dell'immagine.

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

Ciò farà sì che il div ridimensioni la sua altezza in base alla dimensione effettiva dei pixel dell'immagine. Per ridimensionare anche la larghezza, aggiungi:

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

Puoi farlo sul lato server: misurando l'immagine e quindi impostando la dimensione div, O caricando l'immagine con JS, leggi i suoi attributi e quindi imposta la dimensione DIV.

Ed ecco un'idea, metti la stessa immagine all'interno del div di un tag IMG, ma dagli visibilità: nascosto + gioca con la posizione relativa + dai a questo div l'immagine come sfondo.

Ho riscontrato questo problema e ho trovato la risposta di Hasanavi ma ho riscontrato un piccolo bug durante la visualizzazione dell'immagine di sfondo su un ampio schermo - L'immagine di sfondo non si è diffusa su tutta la larghezza dello schermo.

Quindi ecco la mia soluzione - basata sul codice di Hasanavi ma migliore ... e questo dovrebbe funzionare su schermi sia extra-wide che mobili.

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

Come avrai notato, la background-size: contain;proprietà non si adatta bene a schermi molto ampi e la background-size: cover;proprietà non si adatta bene agli schermi mobili, quindi ho usato questo @mediaattributo per giocare con le dimensioni dello schermo e risolvere questo problema.

Cosa ne pensi di questo :)

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

Se si tratta di una singola immagine di sfondo predeterminata e si desidera che il div sia reattivo senza distorcere le proporzioni dell'immagine di sfondo, è possibile prima calcolare le proporzioni dell'immagine e quindi creare un div che preservi le sue proporzioni procedendo come segue :

Supponiamo che tu desideri un formato 4/1 e la larghezza del div sia del 32%:

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

Ciò deriva dal fatto che l'imbottitura viene calcolata in base alla larghezza dell'elemento contenitore.

Può essere questo può aiutare, non è esattamente uno sfondo, ma hai l'idea semplice

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

Puoi fare qualcosa del genere

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

Se conosci il rapporto dell'immagine al momento della creazione, vuoi l'altezza in base all'altezza della finestra e stai bene prendendo di mira i browser moderni (IE9 +) , quindi puoi utilizzare le unità di visualizzazione per questo:

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

Non proprio quello che l'OP stava chiedendo, ma probabilmente una buona scelta per molti di coloro che hanno visualizzato questa domanda, quindi volevo dare un'altra opzione qui.

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

Ho esaminato alcune delle soluzioni e sono fantastiche, ma penso di aver trovato un modo sorprendentemente semplice.

Innanzitutto, dobbiamo ottenere il rapporto dall'immagine di sfondo. Dividiamo semplicemente una dimensione attraverso un'altra. Quindi otteniamo qualcosa di simile, ad esempio, al 66,4%

Quando abbiamo un rapporto immagine possiamo semplicemente calcolare l'altezza del div moltiplicando il rapporto per la larghezza della finestra:

height: calc(0.664 * 100vw);

Per me funziona, imposta correttamente l'altezza div e la modifica quando la finestra viene ridimensionata.

Supponiamo di avere qualcosa del genere:

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

e vuoi aggiungere uno sfondo ad esso, ma non conosci la dimensione dell'immagine.

Ho avuto un problema simile e l'ho risolto utilizzando la griglia:

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-indexserve solo per posizionare l'immagine sullo sfondo, ovviamente puoi posizionarla img.backgroundsopra la div.content.

NOTA : potrebbe avere la div.contentstessa altezza dell'immagine, quindi se ci div.contentsono bambini posizionati in base alla sua altezza, potresti voler impostare un numero diverso da "auto".

Ha avuto questo problema con Umbraco CMS e in questo scenario è possibile aggiungere l'immagine al div usando qualcosa del genere per l'attributo 'style' del div:

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

Ho affrontato questo problema per un po 'e ho deciso di scrivere un plugin jquery per risolvere questo problema. Questo plugin troverà tutti gli elementi con la classe "show-bg" (oppure puoi passarlo il tuo selettore) e calcolare le dimensioni dell'immagine di sfondo. tutto quello che devi fare è includere questo codice, contrassegnare gli elementi desiderati con class = "show

Godere!

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

La migliore soluzione che mi viene in mente è specificando la larghezza e l'altezza in percentuale. Ciò ti consentirà di ripristinare lo schermo in base alle dimensioni del monitor. è più di layout reattivo ..

Per un'istanza. hai

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

Questa è l'opzione migliore se desideri un layout reattivo, non consiglierei il float, in alcuni casi il float va bene per l'uso. ma nella maggior parte dei casi, evitiamo di usare il float poiché influirà su un numero piuttosto elevato di cose quando si eseguono test cross-browser.

Spero che questo ti aiuti :)

in realtà è abbastanza facile quando sai come farlo:

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

il trucco è solo quello di impostare il div racchiuso come un div normale con valori dimensionali uguali ai valori dimensionali di sfondo (in questo esempio, 100% e 40vw).

Ho risolto questo usando jQuery. Fino a quando le nuove regole CSS non consentono questo tipo di comportamento in modo nativo, trovo che sia il modo migliore per farlo.

Configura i tuoi div

Sotto hai il tuo div su cui vuoi che appaia lo sfondo ("eroe") e poi il contenuto / testo interno che vuoi sovrapporre all'immagine di sfondo ("interno"). Puoi (e dovresti) spostare gli stili in linea nella tua classe di eroi. Li ho lasciati qui, quindi è facile e veloce vedere quali stili sono applicati ad esso.

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

Calcola le proporzioni dell'immagine

Quindi calcola le proporzioni per l'immagine dividendo l'altezza dell'immagine per la larghezza. Ad esempio, se l'altezza dell'immagine è 660 e la larghezza è 1280, le proporzioni sono 0,5156.

Imposta un evento di ridimensionamento della finestra jQuery per regolare l'altezza

Infine, aggiungi un listener di eventi jQuery per il ridimensionamento della finestra, quindi calcola l'altezza del div dell'eroe in base alle proporzioni e aggiornalo. Questa soluzione in genere lascia un pixel extra in basso a causa di calcoli imperfetti utilizzando le proporzioni, quindi aggiungiamo un -1 alla dimensione risultante.

$(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);
}

Assicurarsi che funzioni al caricamento della pagina

È necessario eseguire la chiamata di ridimensionamento sopra quando la pagina viene caricata per avere le dimensioni dell'immagine calcolate all'inizio. In caso contrario, il div dell'eroe non si adatterà fino a quando non ridimensionerai la finestra. Ho impostato una funzione separata per eseguire le regolazioni di ridimensionamento. Ecco il codice completo che uso.

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();        
    }
});

Se riesci a creare un'immagine su Photoshop in cui il livello principale ha un'opacità di circa 1 ed è sostanzialmente trasparente, metti quell'immagine nel div e quindi trasforma l'immagine reale nell'immagine di sfondo. ALLORA imposta l'opacità di img su 1 e aggiungi le dimensioni desiderate.

Quell'immagine è fatta in quel modo, e non puoi nemmeno trascinare l'immagine invisibile fuori dalla pagina che è bello.

aggiungi a div

style="overflow:hidden;"