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

【问题标题】：Why are these Images bigger then original size?为什么这些图像比原始尺寸大？
【发布时间】：2011-08-29 20:19:42
【问题描述】：

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

【问题讨论】：

您正在使用 CSS 调整大小，它将使图像“适合”，它不是只会使图像变小的处理器，它会使它们全部缩小 95%。这意味着它扩大了一些。你需要 Javascript 来做你正在尝试的事情。
因为在 FF 中设置 width 会使图像关闭，而在 chrome 中设置 height 和其他一切都会使图像关闭

标签： javascript jquery css image

【解决方案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】：

你可以试试这种方法：

h = $('#theimage').height(); w = $('#theimage').width(); 如果（h > 400 && w

其他比较也一样，适当缩小。我认为数学就在那里......

【讨论】：

【解决方案3】：

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

【讨论】：