Come impostare l'altezza massima a $ img, ma mantenere le proporzioni

Question

Come impostare la massima altezza o larghezza per:

$ img_attributes = 'height = 100 width = 100'. 'Alt = "'. $ Prodotto [ 'product_name']. '"';

Answer 1

Bene, ci sono le proprietà max-height e max-width CSS, non è vero? Funzionano in tutti i principali browser tranne IE 6 e IE 7.

Answer 2

Si consiglia di consultare questa risposta per informazioni generali: Proportional image resize.

Se si desidera ridimensionare un'immagine senza utilizzare il lato server, suggerisco all'utente Javascript. Ecco un tutorial.

In breve si dispone di una funzione JavaScript che restituisce il nuovo Larghezza e Altezza:

function scaleSize(maxW, maxH, currW, currH){ 
    var ratio = currH/currW; 
    if(currW >= maxW){ 
     currW = maxW; 
     currH = currW * ratio; 
    } else >if(currH >= maxH){ 
     currH = maxH; 
     currW = currH/ratio; 
    } 
    return [currW, currH]; 
} 

Con questa funzione è possibile impostare la larghezza e l'altezza dell'immagine:

img.width = newW; 
img.height = newH; 

Ma, il migliore il modo sarebbe farlo sul lato server. Ciò impedirà di avere un effetto strano sul lato client.

Answer 3

Il seguente stile farà sì che tutte le immagini che utilizzano la classe css "MaxSized" abbiano un'altezza massima di 100 px e una larghezza massima di 100 px. Se un'immagine è più piccola, non sarà allungata.

<style> 
IMG.MaxSized 
{ 
max-width: 100px; 
max-height: 100px; 
} 
</style> 

Come già detto da Pekka, dovrete avere un XHTML 1.0 DTD Strict in modo che questo lavorare in versioni moderne di IE, ma io personalmente credo che questo è l'approccio adeguato.

Answer 4

Come la risposta in alto dice, è possibile utilizzare max-height o max-width proprietà CSS. Ma queste proprietà non si comportano allo stesso modo. Per mantenere il rapporto dell'immagine, devi impostare altezza e larghezza al 100%, quindi impostare max-width. Se imposti max-height il rapporto non viene mantenuto.

Quindi:

<img src="image.png" style="height: 100%; width: 100%; max-width: 400px" alt=" "/> 

vuol mantenere il rapporto, ma

<img src="image.png" style="height: 100%; width: 100%; max-height: 400px" alt=" "/> 

non lo fa. Questo perché (per quanto ho capito) HTML prima imposta la larghezza e poi l'altezza. Quindi nel secondo caso la larghezza è impostata al 100% ma l'altezza è limitata, il che potrebbe causare una distorsione dell'immagine. Nel primo caso, la larghezza viene impostata con un limite massimo e l'altezza viene regolata di conseguenza, preservando quindi le dimensioni dell'immagine.