Question

假设我有以下html：

<div id="container">
    <img id="large-image" src="/img/large-image.jpg" />
    <img id="large-image-thumb" src="/img/large-image-thumb.jpg" />
</div>

我怎样才能使缩略图的大小与图像相同？有没有更好的方法来构建它？

这个功能是在加载全质量版本时提供低质量版本的图像，其中已经加载了低质量版本（因此渐进式jpgs没有帮助）。这用于在单击图库中的缩略图时显示大图像。

哦，我知道大图像在加载之前的宽度和高度，但是如果可能的话，我宁愿不在javascript中设置显式大小 - 如果可能的话，它应该在用户调整窗口大小时进行缩放。抓住resize()事件感觉很脏。

Answer 1

一种古老的（但仍然有效）技术是使用IMG标签的 LOWSRC attirbute。在图像确实需要很长时间下载的情况下，这曾经在拨号时使用过。人们将它用于低分辨率+低调色板版本，以便在完整版本加载后快速加载。

<img src="... big image ..." lowsrc="... same size but small file image ..." />

Answer 2

使用jQuery，你可以做到

var largew = $('#container').find('img').eq(1).width(),
    largeh = $('#container').find('img').eq(1).height();
$('#container').find('img').eq(0).css({
    height: largeh,
    width: largew
});

拇指图像的大小与大图像相同。 eq(0)引用第一个图像，即拇指，eq(1)引用第二个图像，即大图像。假设您在#container内按此顺序拥有它们。您还应该使用class而不是id作为图像。也就是说，如果您计划在其他图像上使用相同的ID名称。您只能在HTML中使用一次id，而不像它可以应用于许多HTML元素的类。

检查工作示例http://jsfiddle.net/7j7kJ/

Answer 3

我对问题的最后部分感到有点困惑：如果图像相对于浏览器窗口缩放，您可以对大图像和小图像执行相同操作;只需使用css将高度或宽度设置为100％（例如）。

您甚至可以使用javascript加载大图像，并在加载时替换小图像，这样您就可以在初始页面加载后对其进行编程，以确保首先加载小图像。

在jQuery中，您可以在加载整个“普通”页面时开始加载大图像，使用：

$(window).load(function() {
    large_image = new Image();
    large_image.src = "/img/large-image.jpg";
    // etc.

    // replace the source of the small image with the big image
    // you will need some additional code to check for the load event of the large images
});

根据其兄弟姐妹的元素大小

3 个答案:

检查工作示例http://jsfiddle.net/7j7kJ/