0

我对 HTML 和 CSS 了解很多，但我仍处于 jQuery 学习曲线的早期阶段。

我需要根据其中的图像大小设置一些 DIV 的各种属性。

这是一些示例 HTML：

<div class="box">
<img src="../pix/onepic.gif">
</div>

这是一个我知道有效的功能：

$('.box').click(function() {            
    var obj = $(this);
    var imgWidth = $('img:first', obj).width();
    var imgHeight = $('img:first', obj).height();

    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
    });

但是我现在想在整个页面上自动运行这个功能，而不只是在我点击的时候，那里会有许多 .box 包含各种大小的图像。

除其他事项外，将上面示例中的“click”替换为“load”确实可以做到。

起初，以下使用“每个”的建议似乎有效；当我把这个脚本：

$('.box').each(function() {            
    var obj = $(this);
    var imgWidth = $('img:first', obj).width();
    var imgHeight = $('img:first', obj).height();
    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
});

在 body-close 标签之前，我得到了我所希望的。

但后来我测试了更多，将 HTML 更改为：

<div class="box">
<p>hello world</p>
<img src="../pix/onepic.gif">
</div>

而 Firefox、Chrome 和 IE 给了我三个完全不同的结果。

Firefox 有我所期望的，hello world 和放大框中的图片。

在 Chrome 中，div 现在的高度和宽度为 0px。

在 IE7 中，div 现在的宽度为 56 像素，高度为 60 像素，我无法辨别——有问题的图像是 100x100。

4

2 回答 2

2

使用jQuery each()函数

$('.box').each(function() {            
    var obj = $(this);
    var imgWidth = $('img',obj).width();
    var imgHeight = $('img',obj).height();

    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
});
于 2012-07-06T08:01:15.073 回答
0

使用 imagesLoaded 插件https://github.com/desandro/imagesloaded 我找到了一种巧妙的方法来做到这一点。

$('.element').imagesLoaded().progress( function( instance , image) {

    newHeight = $(image.img).height();

    $(image.img.parentNode).height(newHeight);

});

这个简单的函数利用了 imagesLoaded 的“进度”函数，该函数迭代给定容器中的所有图像，并在确认已加载时将它们一一交给您。

有许多不同的方法可以访问容器、图像以及图像状态（加载失败）等

我建议检查一下:-)

于 2013-10-08T16:36:09.383 回答