Question

“table”/

I have a 顶版显示用户名单(稍后将把这一文字变为Droupal栏),链接到其个人概况网页。对于大多数用户来说,我在数据库中有一个同位素,我很喜欢在顶页上显示,但我不知道如何改变其同位素。

I.e. 用户可能有160x100幅照片或20x40幅照片,但在我的顶页上,我希望这些同位素能够安装在60x40上。

而且,我只能写上<img src=......> . width=“60”等高=“40”>,因为图像将出现扭曲(即:比率得到保持)。

是否采用超文本、CSS或jQuery的方式来扩大形象,但保持其比例?

(我不想用Perl/PHP书写器下载每张图像,然后用图像Magick或类似的东西——这太重)

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

Answer 2

http://plugins.jquery.com/plugin-tags/image-resize”rel=“nofollow”j 彩色图像转播图书馆,并称之为:

$(function() {
  $( ".resizeme" ).aeImageResize({ height: 200, width: 250 });
  // Works with one parameter as well
  $( ".resizeme" ).aeImageResize({ width: 250 });
});

Answer 3

I think this is the wrong approach. Your comments on the other answers suggest that you aren t limiting the filesize/dimensions of uploaded photos. As you are expecting to resize the image client-side, the full image is fetched by the browser for each user in your top list.

如果有人上载500KBjpeg,会发生什么情况? 一种可能性是,一种100%质量的台式图像很容易是大的。如果你重新显示10个用户,这可使每页浏览5MB。我看到,由于提供原始图像,许多网站都超过了带宽(因此无法提供)。

你们为什么不使用服务器方的转水器,如“刺激”?

Answer 4

如果你确定宽度或高度,并留下一个空白,那么你将重新计算和保持比率。

为进行剪辑,可在<代码>DIV内贴有60x40尺寸的和overflow: 隐藏。

Answer 5

既然你不知道你的情况是否总是太广或太大,那么光是不会解决你的问题,但你总是能够确定宽度或高度,而你的浏览器应当相应地扩大其他方面(保留方面的比例)。

友情链接