Cómo establecer la altura máxima de $ img pero tenga proporciones

Question

Cómo establecer la máxima altura o anchura para:

$ img_attributes = 'height = 100 width = 100'. 'alt = "'. $ product ['product_name']. '"';

Answer 1

Bueno, están las propiedades CSS max-height y max-width, ¿no? Funcionan en todos los principales navegadores excepto en IE 6 y en IE 7.

Answer 2

Debe consultar esta respuesta para obtener información general: Proportional image resize.

Si desea cambiar el tamaño de una imagen sin utilizar el lado del servidor, le sugiero que utilice el Javascript. Aquí hay un tutorial.

En resumen tiene una función de JavaScript que devolverá la nueva anchura y altura:

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 esta función se puede ajustar el ancho de la imagen y la altura:

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

Pero, la mejor forma sería hacerlo en el lado del servidor. Esto evitará tener un efecto extraño en el lado del cliente.

Answer 3

El siguiente estilo hará que todas las imágenes que usan la clase css "MaxSized" tengan una altura máxima de 100 px y un ancho máximo de 100 px. Si una imagen es más pequeña, no se alargará.

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

Según lo mencionado por Pekka, usted tiene que tener una DTD XHTML 1.0 estricto para que esto funcione en versiones modernas de IE, pero personalmente creo que este es el enfoque adecuado.

Answer 4

Como dice la respuesta superior, puede usar las propiedades CSS max-height o max-width. Pero estas propiedades no se comportan de la misma manera. Para mantener la proporción de la imagen, debe configurar el alto y el ancho al 100% y luego establecer max-width. Si configura max-height, la proporción no se conserva.

Así:

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

preserva la relación, pero

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

no. Esto es porque (hasta donde yo entendí) HTML primero establecerá el ancho y luego la altura. Por lo tanto, en el segundo caso, el ancho se establece en 100%, pero la altura es limitada, lo que puede provocar la distorsión de la imagen. En el primer caso, el ancho se establece con un límite máximo y la altura se ajusta en consecuencia, preservando así las dimensiones de la imagen.