CSS3 moderno (consigliato per il futuro e probabilmente la soluzione migliore)
.selector{
background-size: cover;
/* stretches background WITHOUT deformation so it would fill the background space,
it may crop the image if the image's dimensions are in different ratio,
than the element dimensions. */
}
Max. allungamento senza ritaglio né deformazione (potrebbe non riempire lo sfondo) : background-size: contain;
forza l'allungamento assoluto (può causare deformazione, ma nessun ritaglio) : background-size: 100% 100%;
"Vecchio" CSS "funziona sempre"
Immagine di posizionamento assoluto come primo figlio del genitore (con posizionamento relativo) e allungamento alla dimensione del genitore.
HTML
<div class="selector">
<img src="path.extension" alt="alt text">
<!-- some other content -->
</div>
Equivalente di CSS3 background-size: cover;
:
Per ottenere ciò dinamicamente, dovresti usare l' opposto dell'alternativa del metodo di contenimento (vedi sotto) e se hai bisogno di centrare l'immagine ritagliata, avresti bisogno di un JavaScript per farlo dinamicamente, ad esempio usando jQuery:
$('.selector img').each(function(){
$(this).css({
"left": "50%",
"margin-left": "-"+( $(this).width()/2 )+"px",
"top": "50%",
"margin-top": "-"+( $(this).height()/2 )+"px"
});
});
Esempio pratico:
Equivalente di CSS3 background-size: contain;
:
Questo può essere un po 'complicato: la dimensione del tuo sfondo che traboccherebbe dal genitore avrà CSS impostato al 100%, l'altra su auto.
Esempio pratico:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: auto;
/* -- OR -- */
/* width: auto;
height: 100%; */
}
Equivalente di CSS3 background-size: 100% 100%;
:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: 100%;
}
PS: Per fare gli equivalenti di copertina / contenuto nel modo "vecchio" in modo completamente dinamico (quindi non dovrai preoccuparti di overflow / rapporti) dovresti usare javascript per rilevare i rapporti per te e impostare le dimensioni come descritto. ..