为什么这些图像比原始尺寸大?

时间:2011-05-20 17:17:20

标签: javascript jquery css image

我有多张图片,我是从Facebook上提取的。它们放在一个卷轴中。当您单击图像时,dialog会显示实际图像(滚动条中的图像是缩略图大小,您使用src_small从Facebook查询获得的内容)

我得到它们之前无法确定图像的大小。有些很大,有些很小。为了解释这一点(所有图像都适合dialog并且尺寸合理),我尝试了这个:

/*
 * Image in the dialog div
 */
 .DialogImagesBig
 {
     position: relative;
     width: 95%;
     top: 0px;
     left: 10px;
 }
 /*
  * Firefox only
  */
 @-moz-document url-prefix() 
 {
     /*
      * Edits images for FF
      */
     .DialogImagesBig
     {
         height: 95% !important;
         width: 95% !important;
         position: relative;
         top: 0px;
         left: 10px;
     }
}

但实际上它会使一些图像变大(大图像较小,但小图像较大且像素化)。这是为什么?我如何解决这个问题,以便所有图像都适合dialog而不是像素化?

编辑我被告知我需要使用Javascript(或Jquery?)来完成这项工作。我该怎么做呢?

3 个答案:

答案 0 :(得分:2)

95%的宽度/高度表示父元素的宽度/高度的95%,而不是图像原始尺寸的95%。

答案 1 :(得分:1)

您可以通过以下方式获取图像宽度/高度:

var img = new Image();
img.src = _image_src_

img.width // returns width
img.height // returns height

img // returns <img src="_image_src_" />

您可以将这些值与对话框的宽度/高度进行比较,并进行所需的所有调整,我希望这可以提供帮助。

示例:

if (img.width > 100) 
  img.width = 100

$("#image_container").html(img)

答案 2 :(得分:1)

你可以尝试这样的事情:


h = $('#theimage').height();
w = $('#theimage').width();

if(h > 400 && w < 500) {
    $('#theimage').height(400);
    $('#theimage').width = w / (h / 400);
}
...
...

其他比较相同,适当缩小它。我认为数学就在那里......