Question

I have a top script displaying a list of users (will turn this script into a Drupal block later), with a link to their individual profile web page. For the most of the users I have a foto in my database, which I’d love to display at the top page, but I don’t know how to resize their fotos.

I.e. a user might have a 160×100 picture or a 20×40 picture, but on my top page I want the fotos to fit inside a 60×40 rectangle.

And I can’t just write <img src=”…” width=”60″ height=”40″> because the images will appear distorted then (i.e. ratio won’t be preserved).

Is there a way in HTML, CSS or jQuery to scale an image, but keep its ratio?

(And I don’t want to download each image by a Perl/PHP-script, then run ImageMagick or anything similar – this is too heavy)

Answer 1

<img id="fixMe" src="something.jpg" />


jQuery(function(){
      var elm=jQuery('#fixMe');
      var allowedHeight=40;
      var allowedWidth=60;
      var ratio= allowedHeight/allowedWidth;
      var width=elm.width();
      var height=elm.height();
      if(width>height)
      {
        elm.width(allowedWidth);
        elm.Height(width*(allowedHeight/allowedWidth));
      }
      else      
    {
       elm.height(allowedHeight);
        elm.width(height*(allowedWidth/allowedHeight));
    }
});