Question

我有多张图片，我是从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？）来完成这项工作。我该怎么做呢？

Answer 1

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

Answer 2

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

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)

Answer 3

你可以尝试这样的事情：


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

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

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

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

3 个答案: