css immagine di sfondo ridimensionamento larghezza altezza del raccolto

Question

Sto usando questo codice da suggerimenti e trucchi css per coprire un'immagine di sfondo. Il problema è che ridimensiona l'immagine per adattarla sia alla larghezza che all'altezza e cambia le proporzioni. Voglio che l'immagine di sfondo si riduca a tutta la larghezza dello schermo e quindi ritaglia solo l'altezza (partendo dalla parte superiore dell'immagine, non dal centro) per coprire la porta di visualizzazione. In questo modo, verranno mantenute le proporzioni dell'immagine.

Un problema secondario che ho è che non sembra funzionare a meno che non utilizzi il FQDN per l'immagine anziché solo l'url sotto.

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

Answer 1

Invece di

background-size: cover; 

si vuole utilizzare

background-size: 100% auto; 

copertina allungherà l'immagine alla dimensione più piccola in modo tale che sia la sua larghezza e la sua altezza può andare bene all'interno del contenuto area, quindi il tuo problema. Vedi di più su quello over here.

Answer 2

Vorrei utilizzare JS per questo invece. I CSS non sembrano gestire molto bene i rapporti d'aspetto.

provare qualcosa di simile:

In primo luogo, creare un div e mettere un'immagine in esso

<div class="big-image"> 
    <img src="path.jpg" width="1000" height="1000" alt="whatever"> 
</div> 

Poi farlo nel CSS:

.featuredImage img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -10; 
} 
/* this class will be added via JS */ 
.bgwidth { width: 100%; } 
.bgheight { height: 100%; } 

E, infine, il tuo JS

var theWindow = $(window), 
    $bg = $(".big-image img"), // Use your image selector here. 
    aspectRatio = $bg.width()/$bg.height(); 

    $bg.removeAttr('width'); 
    $bg.removeAttr('height'); 

    function resizeBg() { 
    if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
     $bg 
     .removeClass() 
     .addClass('bgheight'); 
    } else { 
     $bg 
     .removeClass() 
     .addClass('bgwidth'); 
    } 
    } 
    theWindow.resize(function() { 
    resizeBg(); 
    }).trigger("resize"); 

Fammi sapere se questo ha un senso. Non esattamente solo CSS che conosco, ma è una soluzione

Answer 3

Le proporzioni dell'immagine non vengono modificate quando si utilizza cover. Tuttavia, credo che quello che vuoi sia di fissare il fondo dell'immagine, dal momento che hai detto che vuoi che venga ritagliato dall'alto, non dal centro, che pensavo volessi dire non dall'alto e dal basso.

Se si desidera mantenere il fondo in basso, (forse un prato con un cielo abbastanza grande?), Sarà necessario modificare il posizionamento su center bottom da center center.

Se lo fai automaticamente al 100% come suggerito da Nit, allora, in una finestra in cui il rapporto altezza/larghezza dell'elemento html è più grande di quello dell'immagine, vedrai uno spazio vuoto in alto che può essere quello che volevi specialmente nel caso in cui si utilizzi un'immagine che sfuma nello stesso colore in cima ...

Per il tuo secondo problema, non è fqdn, è il riferimento/riferimento assoluto del tuo percorso. Secondo il tuo css, dovrebbe esserci una cartella di immagini in cui il tuo file css ha un bg.jpg.

index.html 
main.css 
images/ 
    bg.jpg