根据其兄弟元素调整大小

发布于 2024-10-31 00:37:14 字数 464 浏览 4 评论 0 原文

假设我有以下 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>

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

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

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

Lets say I have the following 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>

How can i make it so that the thumbnail is sized the same way as the image? Is there a better way to structure this?

The function of this is to provide a low-quality version of an image while the full-quality version is loading, where the low-quality version has already been loaded (thus progressive jpgs are not helpful). This is used to display a large image when a thumbnail in a gallery is clicked.

Oh, and I know the width and the height of the large image before it has loaded, but I would rather not set an explicit size within the javascript if possible- it should scale when the user resizes the window if possible. Catching the resize() event just feels dirty.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

无声静候 2024-11-07 00:37:14

一种古老(但仍然有效)的技术是使用 IMG 标签的 LOWSRC 属性。这曾经在拨号时代使用过,当时下载图像确实需要很长时间。人们将其用于低分辨率+低调色板版本,以快速加载,然后加载完整版本。

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

An ancient (but still valid) technique is to use the LOWSRC attirbute of the IMG tag. This was once used back in the dial-up days when images did take a long time to download. People used it for low-resolution + low palette versions to load quickly while the full version loaded after.

<img src="... big image ..." lowsrc="... same size but small file image ..." />
丑疤怪 2024-11-07 00:37:14

使用 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 名称。与类不同,id 只能在 HTML 中使用一次,在类中它可以应用于许多 HTML 元素。

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

With jQuery you can do

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
});

The thumb image will be sized the same as the large image. eq(0) is referencing the first image which is the thumb and eq(1) is referencing the second image which is the large one. This is assuming that you have them in this order inside #container. Also you should use class instead of id for your images. That is if you are planning to use the same id names on other images. You can only use an id once in your HTML unlike class where it can applied to many number of HTML elements.

Check working example http://jsfiddle.net/7j7kJ/

阳光①夏 2024-11-07 00:37:14

我对问题的最后部分感到有点困惑:如果图像相对于浏览器窗口缩放,则可以对大图像和小图像执行相同的操作;只需使用 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
});

I´m a bit confused by the last part of the question: if the image is scaled relative to the browser window, you can do the same for the large and the small image; just set the height or the width to 100% (for example) using css.

You can even load the big image using javascript and have it replace the small image when it is loaded, that way you can program it after the initial page-load to insure that your small images get loaded first.

In jQuery, you can start loading the large images when the whole "normal" page has loaded, using:

$(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
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文