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

发布于 2024-11-08 13:32:55 字数 830 浏览 0 评论 0原文

我有很多从 Facebook 上获取的图片。它们被放置在卷轴中。当您点击图像时，会出现一个带有实际图像的对话框（滚动条中的图像是缩略图大小，您可以通过src_small从Facebook查询中获得）

我无法确定在我得到图像之前，先确定图像的大小。有些很大，有些很小。考虑到这一点（因此所有图像都适合对话框并且大小合理）我尝试了以下方法：

/*
 * 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;
     }
}

但它实际上使一些图像比它们实际的尺寸更大（大图像更小，但小图像更大）和像素化）。这是为什么？我该如何解决这个问题，以便所有图像都适合对话框并且不会像素化？

编辑我被告知我需要使用 Javascript（或 Jquery？）来完成此任务。我该怎么做呢？

原文

I have multiple images that I pull from facebook. They are placed in a scroller. When you click on the image a dialog appears with the actual image (The images in the scroller are thumbnail size, what you get from a facebook query with src_small)

I cannot determine the size of the images before I get them. Some are huge and others very small. To account for this (so all images fit in the dialog and are a reasonable size) I tried this:

/*
 * 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;
     }
}

But it actually makes some images bigger then they are (Big images are smaller, but small images are bigger and pixelated). Why is that? How would I fix this so that all images fit in the dialog and are not pixelated?

Edit I have been told that I need to use Javascript (or Jquery?) to get this done. How would I go about doing that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

影子的影子 2024-11-15 13:32:55

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

回复收藏 0 原文

悟红尘 2024-11-15 13:32:55

您可以通过执行以下操作来获取图像宽度/高度：

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)

You can get the image width/height by doing this:

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

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

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

You can compare those values with the width/height of your dialog and do all the resizing you need, i hope this can help.

Example:

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

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

回复收藏 0 原文

夜未央樱花落 2024-11-15 13:32:55

你可以尝试这样的事情：

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

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

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

You could try this sort of thing:

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

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

same for other comparisons, to shrink it down appropriately. I think the math is right there...

回复收藏 0 原文

~没有更多了~