Immagine di sfondo di larghezza al 100% con altezza "automatica"

Attualmente sto lavorando a una pagina di destinazione per dispositivi mobili per un'azienda. È un layout davvero semplice ma sotto l'intestazione c'è un'immagine di un prodotto che sarà sempre al 100% di larghezza (il design mostra che va sempre da un bordo all'altro). A seconda della larghezza dello schermo, ovviamente l'altezza dell'immagine si adatterà di conseguenza. Inizialmente l'ho fatto con un img (con una larghezza CSS del 100%) e ha funzionato benissimo, ma mi sono reso conto che mi piacerebbe utilizzare le query multimediali per servire immagini diverse in base a risoluzioni diverse - diciamo un piccolo, medio e una versione grande della stessa immagine, per esempio. So che non puoi modificare img src con CSS, quindi ho pensato che avrei dovuto utilizzare uno sfondo CSS per l'immagine anziché un tag img nell'HTML.

Non riesco a farlo funzionare correttamente poiché il div con l'immagine di sfondo ha bisogno sia di una larghezza che di un'altezza per mostrare lo sfondo. Ovviamente posso usare 'larghezza: 100%' ma cosa uso per l'altezza? Posso inserire un'altezza fissa casuale come 150px e poi posso vedere i 150px superiori dell'immagine ma questa non è la soluzione in quanto non c'è un'altezza fissa. Ho giocato e ho scoperto che una volta che c'è un'altezza (testata con 150px) posso usare 'background-size: 100%' per adattare correttamente l'immagine nel div. Posso usare il CSS3 più recente per questo progetto poiché è rivolto esclusivamente ai dispositivi mobili.

Ho aggiunto un esempio approssimativo di seguito. Per favore scusa gli stili in linea ma volevo fornire un esempio di base per cercare di rendere la mia domanda un po 'più chiara.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Forse devo dare al div contenitore un'altezza percentuale basata sull'intera pagina o sto guardando questo completamente sbagliato?

Inoltre, pensi che gli sfondi CSS siano il modo migliore per farlo? Forse esiste una tecnica che serve diversi tag img in base alla larghezza del dispositivo / dello schermo. L'idea generale è che il modello della pagina di destinazione verrà utilizzato numerose volte con immagini di prodotto diverse, quindi devo assicurarmi di svilupparlo nel miglior modo possibile.

Mi scuso è che questo è un po 'prolisso, ma sono avanti e indietro da questo progetto all'altro, quindi mi piacerebbe portare a termine questa piccola cosa. Grazie in anticipo per il tuo tempo, è molto apprezzato. Saluti

Invece di usare background-image, puoi usare imgdirettamente e per fare in modo che l'immagine si diffonda per tutta la larghezza del viewport prova a usare max-width:100%;e ricorda di non applicare alcun riempimento o margine al div del contenitore principale poiché aumenteranno la larghezza totale del contenitore. Usando questa regola puoi avere una larghezza dell'immagine uguale alla larghezza del browser e anche l'altezza cambierà in base alle proporzioni. Grazie.

Modifica: modifica dell'immagine su diverse dimensioni della finestra

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

In questo modo modifichi la tua immagine in diverse dimensioni del browser.

Tim S. era molto più vicino a una risposta "corretta" rispetto a quella attualmente accettata. Se vuoi avere un'immagine di sfondo di larghezza e altezza variabile al 100% eseguita con CSS, invece di utilizzare cover(che consentirà all'immagine di estendersi dai lati) o contain(che non consente all'immagine di estendersi affatto), basta imposta il CSS in questo modo:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

Questo imposterà l'immagine di sfondo al 100% di larghezza e consentirà all'altezza di traboccare. Ora puoi utilizzare le media query per scambiare quell'immagine invece di fare affidamento su JavaScript.

EDIT: Mi sono appena reso conto (3 mesi dopo) che probabilmente non vuoi che l'immagine trabocchi; sembra che tu voglia ridimensionare l'elemento contenitore in base alla sua immagine di sfondo (per preservarne le proporzioni), cosa che non è possibile con i CSS per quanto ne so.

Spero che presto sarai in grado di utilizzare il nuovo attributo srcsetimg sull'elemento. Se vuoi usare gli imgelementi ora, la risposta attualmente accettata è probabilmente la migliore.

Tuttavia, puoi creare un elemento immagine di sfondo reattivo con proporzioni costanti utilizzando esclusivamente CSS. Per fare ciò, si imposta heightsu 0 e padding-bottomsu una percentuale della larghezza dell'elemento, in questo modo:

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Per utilizzare diverse proporzioni, dividi l'altezza dell'immagine originale per la sua larghezza e moltiplica per 100 per ottenere il valore percentuale. Questo funziona perché la percentuale di riempimento viene sempre calcolata in base alla larghezza, anche se si tratta di riempimento verticale.

Prova questo

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Versione semplificata

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Puoi utilizzare la proprietà CSS background-sizee impostarla su covero contain, a seconda delle tue preferenze. Cover coprirà interamente la finestra, mentre contiene farà sì che un lato si adatti alla finestra quindi non coprirà l'intera pagina (a meno che le proporzioni dello schermo non siano uguali all'immagine).

Tieni presente che questa è una proprietà CSS3. Nei browser meno recenti, questa proprietà viene ignorata. In alternativa, puoi utilizzare javascript per modificare le impostazioni CSS a seconda delle dimensioni della finestra, ma non è preferibile.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Usa solo un'immagine di sfondo a due colori:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Aggiungi il css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

E html è:

<div class="bg-mg"></div>

CSS: allungare l'immagine di sfondo al 100% di larghezza e altezza dello schermo?

È il 2017 e ora puoi usare l' adattamento agli oggetti che ha un supporto decente . Funziona allo stesso modo di un div background-sizema sull'elemento stesso e su qualsiasi elemento comprese le immagini.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}