jquery - 调整图像大小但保持其比例——是否可以通过 HTML、CSS 或 jQuery 实现？

Question

我有a top script显示用户列表(稍后会将此脚本转换为 Drupal block )，以及指向他们个人资料网页的链接。对于大多数用户，我的数据库中都有一张照片，我很想将其显示在首页，但我不知道如何调整他们照片的大小。

即用户可能有一张 160x100 或 20x40 的图片，但在我的首页上我希望照片适合 60x40 矩形。

而且我不能只写 因为图像会出现扭曲(即比率不会被保存)。

有没有办法在 HTML、CSS 或 jQuery 中缩放图像，但保持其比例？

(而且我不想通过 Perl/PHP 脚本下载每个图像，然后运行 ​​ImageMagick 或类似的东西——这太重了)

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));
    }
});