获取按 css 百分比缩放的图像尺寸答案

【问题标题】：getting dimensions of images scaled in percentage by css获取按 css 百分比缩放的图像尺寸
【发布时间】：2012-01-02 21:01:36
【问题描述】：

我正在尝试获取通过 css 使用百分比值缩放的图像元素的尺寸（宽度）。

代码如下：

<div id="wrapper">
                    <ul id="gallery_content">
                        <li><img src="images/thumbs/1.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
                        <li><img src="images/thumbs/4.jpg"/></li>
                        <li><img src="images/thumbs/5.jpg"/></li>
                        <li><img src="images/thumbs/6.jpg"/></li>
                        <li><img src="images/thumbs/7.jpg"/></li>
                        <li><img src="images/thumbs/8.jpg"/></li>
                        <li><img src="images/thumbs/9.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
                        <li><img src="images/thumbs/4.jpg"/></li>
                        <li><img src="images/thumbs/5.jpg"/></li>
                        <li><img src="images/thumbs/6.jpg"/></li>
                        <li><img src="images/thumbs/7.jpg"/></li>
                        <li><img src="images/thumbs/8.jpg"/></li>
                        <li><img src="images/thumbs/9.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
        </ul>
    </div>

这里是css：

ul#gallery_content li{ background:#FFF; list-style:none; display:inline; float:left; margin:0; height: 100%;}
ul#gallery_content li img { width:auto; height:100%; width:auto; }

我正在尝试获取包装元素的实际宽度（所有图像宽度的总和）。在

中访问它们时

$(document).ready(
    galItems = $('#gallery_content').children().children();
    galSize = 0;
    $.each(galItems, function(index, item){
        galSize += parseInt(item.width)
    });     
)

它获取所有图像元素但不获取计算的宽度。是否有机会使用 jquery 获取图像的实际渲染宽度？

【问题讨论】：

标签： jquery css image-size

【解决方案1】：

您是否尝试过将 .width() 作为函数？

http://api.jquery.com/width/

galSize += parseInt(item.width());

问题解决后编辑：

原来问题实际上是在页面之前执行了 javascript，并且图像已完全加载。

通过将 $(document).ready() 更改为 $(window).load() 解决了这个问题。

【讨论】：

然后我得到一个“Uncaught TypeError: Property 'width' of object # is not a function”错误
我猜这是因为 item 不是 jQuery 对象？尝试获取 $(this).width()。
然后我得到 0 作为图像的宽度。
那么为什么不尝试这样的事情呢？ $('#gallery_content').find('img').each(function() { galSize += $(this).width()});
我刚刚遇到，$(document).ready() 调用中的 js 代码在站点完全呈现之前执行。问题可能是，图像的宽度在 css 中设置为自动，因此无法通过 js 访问？

【解决方案2】：

在ready() 事件中，您应该传递一个函数，因此将您的代码包装在一个函数中，如下所示：

$(document).ready(function(){
    var galItems = $('#gallery_content').children().children();
    var galSize = 0;
    $.each(galItems, function(index, item){
        galSize += +(item.width)
    });
});

使用+ 符号代替parseInt 将字符串转换为数字，这样更快。

【讨论】：