Question

我对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 es。

除此之外，在上面的示例中替换“click”并使用“load”执行bugger-all。

首先，下面使用“each”的建议似乎有效;我把这个剧本放在一边：

$('.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);
});

在贴身标签之前，我得到了我所希望的。

但后来我又测试了一些，将HTML更改为：

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

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

Firefox有我所期望的，你好世界和图片放大。

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

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

Answer 1

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

Answer 2

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

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

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

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

}）;

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

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

我建议您查看： - ）

jquery函数根据图像调整div的大小

2 个答案: