CSS forza il ridimensionamento dell'immagine e mantiene le proporzioni

Question

Altro

Fonte Versione non AMP Modifica

CSS forza il ridimensionamento dell'immagine e mantiene le proporzioni

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.

Cody Guldner

Domanda modificata 4º giugno 2013 в 5:23

Programmazione

image css aspect-ratio

20º ottobre 2012 в 6:20

16 visualizzazioni

Hoffmann · Answer 1 · 2013-05-30T13:47:50+00:00

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')";

el Dude · Answer 2 · 2012-10-20T18:30:53+00:00

el Dude

Fonte Versione non AMP Modifica

Rimuovere la proprietà "height".

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:

el Dude

Risposta modificata 10º luglio 2013 в 2:35

17

0

Commentari (4)

Marat Tanalin · Answer 3 · 2012-10-20T18:37:36+00:00

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.