Sto lavorando con le immagini e mi sono imbattuto in un problema con le proporzioni.
<img src="big_image.jpg" width="900" height="600" alt="" />
Come puoi vedere, height
e width
sono già specificati. Ho aggiunto la regola CSS per le immagini:
img {
max-width:500px;
}
Ma per big_image.jpg
, ricevo width=500
e height=600
. Come posso impostare le immagini per essere ridimensionate, mantenendo le loro proporzioni.
La proprietà background-size è solo ie>=9, ma se ti va bene, puoi usare un div con background-image
e impostare background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Ora puoi semplicemente impostare la dimensione del tuo div a qualsiasi cosa tu voglia e non solo l'immagine manterrà il suo aspect ratio ma sarà anche centralizzata sia verticalmente che orizzontalmente all'interno del div. Basta non dimenticare di impostare le dimensioni nel css dato che i div non hanno l'attributo width/height sul tag stesso.
Questo approccio è diverso dalla risposta di setecs, usando questo l'area dell'immagine sarà costante e definita da te (lasciando spazi vuoti sia orizzontalmente che verticalmente a seconda delle dimensioni del div e del rapporto d'aspetto dell'immagine), mentre la risposta di setecs ti darà un box che ha esattamente le dimensioni dell'immagine scalata (senza spazi vuoti).
Modifica: Secondo la documentazione MDN background-size è possibile simulare la proprietà background-size in IE8 utilizzando una dichiarazione di filtro proprietario:
Sebbene Internet Explorer 8 non supporti la proprietà background-size, è possibile emulare alcune delle sue funzionalità utilizzando la funzione non standard -ms-filter:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Rimuovere la proprietà "height".
<img src="big_image.jpg" width="900" alt=""/>
Specificando entrambe stai cambiando il rapporto d'aspetto dell'immagine. Impostandone solo una si ridimensiona ma si conserva il rapporto d'aspetto.
Opzionalmente, per limitare il sovradimensionamento:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Non c'è un modo standard per preservare le proporzioni per le immagini con larghezza
, altezza
e larghezza massima
specificate insieme.
Quindi siamo costretti o a specificare width
e height
per evitare che la pagina "salti" durante il caricamento delle immagini, o a usare max-width
e non specificare le dimensioni delle immagini.
Specificare solo width
(senza height
) tipicamente non ha molto senso, ma puoi provare a sovrascrivere l'attributo HTML height
aggiungendo una regola come IMG {height: auto; }
nel tuo foglio di stile.
Vedi anche il relativo Firefox bug 392261.