Muchas veces es necesario escalar una imagen para que se mantenga dentro de unos límites y pueda visualizarse correctamente. Es mucho mejor si la imagen no se deforma. En estos casos hay que hacer un escalado manteniendo el aspect ratio.
Hoy día hay cientos de librerias para cualquier lenguaje que realizan un escalado. La única pregunta es, ¿cuales deben ser el nuevo ancho y largo de la imagen?
A continuación el código mágico que está probado en javascript, pero que debe funcionar en PHP, python, java, perl, C, y lo que le pongas por delate 
if (w < h) {
h = (h * maxWidth) / w;
w = maxWidth;
}
else {
w = (w * maxHeight) / h;
h = maxHeight;
}w representa el ancho o width de la imagen
h representa el alto o height de la imagen
maxWidth la anchura máxima del área en la que se quiere meter la imagen
maxHeight la altura máxima del área en la que se quiere meter la imagen
Como ejemplo final, aunque es prácticamente copy paste, imaginad que quereis meter una imágen de tamaño (w, h) en un área de 640×480:
var maxWidth = 640, maxHeight = 480;
if (w > maxWidth || h > maxHeight) {
if (w < h) {
h = (h * maxWidth) / w;
w = maxWidth;
}
else {
w = (w * maxHeight) / h;
h = maxHeight;
}
}
English
27/03/2009 at 3:02 pm Permalink
Joer Pau, ¿tu me lees la mente? (o deberia decir el mantis)
Justo esa era una de las tareas que tenia marcadas para la proxima semana. Fijate en la foto de moda2012 que aparece debajo de la sección “ropa” (la de la chica en ropa interior). Aparece deformada justo por eso. El theme es una muy bueno en cuanto a diseño pero tiene errores garrafales en cuanto a programacion (el panel de la derecha “galeria de moda” tambien deformaba las imagenes y lo tuve que corregir de una forma muy parecida a la que explicas en el articulo pero en PHP).
De todas formas lo mas jodido (o lento) suele ser obtener las dimensiones de una imagen arbitraria.
28/03/2009 at 2:01 am Permalink
Se ve que es muy común xD
Si quieres te pongo el comando de imagemagick que te deja las fotos niqueladas. De hecho tengo una funcioncita mágica en PHP + ImageMagick que coge una imagen, la rota usando EXIF, le pone watermark (si se quiere y en la posicion que se quiera), la escala manteniendo el aspect ratio, y un par de cosas más
29/03/2009 at 1:21 pm Permalink
ImageMagick es demasiado pesado
No, como yo lo uso es igual que tu pero pongo en el tag IMG el tamaño calculado y dejo que sea el browser quien haga el “trabajo sucio”. Ya sabes que DH es muy suyo con eso de usar demasiada CPU…
29/03/2009 at 1:41 pm Permalink
Hombre, todo depende del número de imágenes que haya que resizear al dia. Una vez una imagen queda redimensionada ya no hay que tocarla, gastará menos ancho de banda.
De todos modos comprendo el tema de DreamHost, y si crees que vale la pena que se haga desde el cliente, no creo que te equivoques.
05/12/2009 at 4:19 am Permalink
Interesante, pero estaría bien lo mismo con CSS. Llevo un tiempo con una plantilla y el escalado CSS y con distintos navegadores me tiene frito.
07/12/2009 at 12:57 am Permalink
@antonio no veo cómo se podría abordar el problema desde el punto de vista de CSS, al menos, de forma genérica, sin saber el tamaño original de la imagen.
Las soluciones que se me ocurren pasan por javascript+CSS.