Escalar una imagen manteniendo el aspecto

Una cosa que se suele hacer bastante en javascript es resetear un formulario, es decir, devolver el formulario a su valor inicial.

Con jquery esto es bastante fácil:


$(

Trackback URL

, , , , ,

  1. Ivan
    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.

  2. Pau Sanchez
    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 🙂

  3. Ivan
    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…

  4. Pau Sanchez
    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.

  5. antonio
    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.

  6. Pau Sanchez
    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.

  7. Liberad a Wifi
    26/04/2015 at 11:54 pm Permalink

    Esta bien el apunte aunque el codigo tiene un pequeño error, el condicional esta al rebes. En el primer if deberia ser w>h ya que de este modo no se sale la imagen del contenedor.
    Ya a modo aporte si luego colocais el codigo a continuacion, la imagen quedara centrada.

    if (w > h) {
    h = (h * maxWidth) / w;
    w = maxWidth;
    }
    else {
    w = (w * maxHeight) / h;
    h = maxHeight;
    }

    x = (maxWidth-w)/2;
    y = (maxHeight-h)/2;

    Un saludo.