Forza le immagini alle dimensioni con Bootstrap

Question

Sto creando una pagina Web parallasse statica con Boostrap, ma ho un problema con le immagini che non vengono visualizzate correttamente.

ho un foglio di stile personalizzato e per ogni sezione sub ho un diverso immagini come questa:

#LM-sub01{ 
background: url(../img/32-cover.jpg) no-repeat center; 
color: #ffffff; 
font-family: 'Lobster', cursive; 
font-weight: 300; 
font-size: 400%; 
} 

In alcuni tratti ci sarà onnly un breve paragrafo di testo che è molto più piccolo rispetto alle dimensioni dell'immagine . Voglio che l'immagine si riduca alle dimensioni dello schermo, ma mostra l'immagine competitiva.

Answer 1

Se si desidera che il contenitore assuma le dimensioni dell'immagine di sfondo indipendentemente dal fatto che i contenuti riempiano il contenitore. Ci sono alcuni modi di fare questo

Esempio 1

Usare immagini reali, posizionare il contenitore position: relative per contenere eventuali elementi secondari che sono posizionati in assoluto, quindi posizionare il contenuto position: absolute con tutte le direzioni impostate a 0 e overflow: auto

.example { 
 
    position: relative; 
 
} 
 
.example .content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto 
 
}

<div class="example"> 
 
    <img src="http://lorempixel.com/1200/768/" width="100%" /> 
 
    <div class="content"> 
 
    <h1> Hello World! </h1> 
 
    </div> 
 
</div>

Esempio 2

Se si sa che le immagini saranno le stesse dimensioni è possibile utilizzare il trucco padding-bottom, perché padding-top e padding-bottom quando determinati valori percentuali si riferiscono alla percentuale della larghezza, ciò richiede nuovamente un posizionamento relativo e assoluto del contenitore, rispettivamente un contenuto. Cambia il fondo del padding per adattarlo ai tuoi rapporti di aspetto.

.example { 
 
    position: relative; 
 
    background-image: url('http://lorempixel.com/1200/768/'); 
 
    background-size: cover; 
 
    padding-bottom: 75%; 
 
} 
 
.example .content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto 
 
} 
 
.

<div class="example"> 
 
    <div class="content"> 
 
    <h1> Hello World! </h1> 
 
    </div> 
 
</div>

Esempio 3

Se Non sapete che misura le immagini saranno e non si desidera utilizzare il primo metodo, è possibile utilizzare javascript. Non puoi effettivamente trovare l'altezza dell'immagine di sfondo stessa, quindi devi fare quanto segue.

1. Creare una nuova immagine dall'immagine di sfondo (il browser caricherà l'immagine solo una volta) per ciascun elemento.
2. Aggiungi le nuove immagini agli elementi a cui sono correlate.
3. Sposta le nuove immagini dallo schermo in modo che l'utente non possa accedervi.
4. Trova l'altezza calcolata di ciascuna immagine (con larghezza impostata al 100% della larghezza del contenitore)
5. Imposta l'altezza di ciascun elemento padre su quella dell'immagine.

function scaleToBg(queryString) { 
 
    this.elements = document.querySelectorAll(queryString); 
 
    for (var i = 0; i < this.elements.length; i++) { 
 
    var img = new Image(); 
 
    img.src = window.getComputedStyle(this.elements[i], null).getPropertyValue("background-image").replace(/url\(|\)/g, ''); 
 
    img.onload = function() { 
 
     this.parentNode.style.height = window.getComputedStyle(this, null).getPropertyValue("height"); 
 
    }; 
 
    img.className = "scaleToBgImg"; 
 
    img.style.cssText = "position:absolute;left:-100%; width:100%;"; 
 
    this.elements[i].appendChild(img); 
 
    } 
 
    this.resize = function() { 
 
    this.images = document.querySelectorAll(".scaleToBgImg"); 
 
    for (var i = 0; i < this.images.length; i++) { 
 
     this.images[i].parentNode.style.height = window.getComputedStyle(img, null).getPropertyValue("height"); 
 
    } 
 
    }; 
 
    return this; 
 
} 
 
var scale = scaleToBg(".scaleToBg"); 
 
window.onresize = function() { 
 
    scale.resize(); 
 
};

.scaleToBg { 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
#scaleToBg1 { 
 
    background-image: url('http://lorempixel.com/1200/200/'); 
 
} 
 
#scaleToBg2 { 
 
    background-image: url('http://lorempixel.com/1200/400/'); 
 
} 
 
#scaleToBg3 { 
 
    background-image: url('http://lorempixel.com/1200/600/'); 
 
} 
 
#scaleToBg4 { 
 
    background-image: url('http://lorempixel.com/1200/800/'); 
 
}

<div class="scaleToBg" id="scaleToBg1"></div> 
 
<div class="scaleToBg" id="scaleToBg2"></div> 
 
<div class="scaleToBg" id="scaleToBg3"></div> 
 
<div class="scaleToBg" id="scaleToBg4"></div>

Answer 2

Background-size:cover; 

è l'opzione migliore per ridimensionare l'immagine con contenitore Div

HTML

<!doctype html> 
<html> 
<body> 
    ...Your content goes here... 
</body> 
</html> 

CSS

body { 
    /* Location of the image */ 
    background-image: url(images/background-photo.jpg); 

    /* Background image is centered vertically and horizontally at all times */ 
    background-position: center center; 

    /* Background image doesn't tile */ 
    background-repeat: no-repeat; 

    /* Background image is fixed in the viewport so that it doesn't move when 
    the content's height is greater than the image's height */ 
    background-attachment: fixed; 

    /* This is what makes the background image rescale based 
    on the container's size */ 
    background-size: cover; 

    /* Set a background color that will be displayed 
    while the background image is loading */ 
    background-color: #464646; 
} 

O vedi link sotto http://sixrevisions.com/css/responsive-background-image/