Question

这听起来很简单，但到目前为止我一直无法解决它。我有大量的图像，由于各种原因需要明确定义其高度。假设没有两个图像具有相同的高度，那么在div.column中找到每个单独图像的高度的最佳方法是什么，然后将height作为参数分配给相应的图像？

HTML

<div class="column">
    <ul>    
        <li><img alt="Logo" src="images/logos1.jpg /></li>
        <li><img alt="Logo" src="images/logos2.jpg /></li>
        <li><img alt="Logo" src="images/logos3.jpg /></li>
        <li><img alt="Logo" src="images/logos4.jpg /></li>
        <li><img alt="Logo" src="images/logos5.jpg /></li>
        <li><img alt="Logo" src="images/logos6.jpg /></li>
    </ul>
</div>

<div class="column">
    <ul>    
        <li><img alt="Icon" src="images/icon1.jpg /></li>
        <li><img alt="Icon" src="images/icon2.jpg /></li>
        <li><img alt="Icon" src="images/icon3.jpg /></li>
        <li><img alt="Icon" src="images/icon4.jpg /></li>
        <li><img alt="Icon" src="images/icon5.jpg /></li>
        <li><img alt="Icon" src="images/icon6.jpg /></li>
    </ul>
</div>

Answer 1

也许是最好的方法：

$('div.column img').each(function(){
    var image = $(this);
    var realHeight = image.attr("naturalHeight");
    image.attr('height', realHeight);
});

诀窍是访问naturalHeight属性而不是访问CSS规则。

jQuery：获取图像高度，分配给图像

1 个答案: