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

StackOverflow https://stackoverflow.com/questions/600743

  •  03-07-2019
  •  | 
  •  

Domanda

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?

È stato utile?

Soluzione

Un'altra soluzione, forse inefficiente, sarebbe quella di includere l'immagine in un img elemento impostato su visibility: hidden;. Quindi rendere background-image il div circostante uguale all'immagine.

Questo imposterà il div circostante alla dimensione dell'immagine nell'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>

Altri suggerimenti

Esiste un modo molto carino e interessante per far funzionare un'immagine di sfondo come un elemento img in modo da regolarne automaticamente height. Devi conoscere l'immagine width e padding-top rapporto. Impostare <=> del contenitore su 0 e impostare <=> come percentuale 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 mediante CSS.

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

Potresti 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 hai semplicemente messo 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 e 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.

Il " contenuto: " La proprietà viene utilizzata principalmente per inserire contenuto di testo in un elemento, ma può anche essere utilizzata per inserire contenuto di immagine. 

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

In questo modo il div ridimensionerà 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 come 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 uno schermo largo - 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 proprietà background-size: contain; non si adatta bene agli schermi molto ampi e la proprietà background-size: cover; non si adatta bene agli schermi mobili, quindi ho usato questo attributo @media per giocare con lo schermo dimensioni e risolvere questo problema.

Che ne dici 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 conservi le sue proporzioni di facendo quanto segue:

Supponi di voler avere un formato di 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>

Si è verificato 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 classe & Quot; show-bg & Quot; (oppure puoi passarlo al 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

Enjoy!

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

La migliore soluzione che mi viene in mente è quella di specificare 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. ma nella maggior parte dei casi, evitiamo di usare float poiché influirà su un numero piuttosto elevato di cose quando si eseguono test cross-browser.

Spero che questo 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 problema 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 (" hero ") e poi il contenuto / testo interno che vuoi sovrapporre sopra l'immagine di sfondo (" quot interna &;). 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

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

Assicurati che funzioni al caricamento della pagina

Dovresti 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 puoi creare un'immagine su Photoshop in cui il livello principale ha un'opacità di circa 1 ed è sostanzialmente trasparente, metti quella img nel div e poi 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 è bella.

basta aggiungere a div 

style="overflow:hidden;"
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top