Javascript jquery查找img大小并设置为div css height和width

Javascript jquery查找img大小并设置为div css height和width,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图让jquery找到owl转盘中每个图像的大小(每页8-10个图像)。出于某种原因,在开发人员中,我只返回宽度为0px,高度为0px的 以下是从developer中显示的元素: <div class="item" style="width: 0px; height: 0px;"> <img src="url.com/img.jpg" alt=""> </div> 如何管理jquery在加载图像时获取图像大小?示例: 试试这个: $('.item'

我试图让jquery找到owl转盘中每个图像的大小(每页8-10个图像)。出于某种原因,在开发人员中,我只返回宽度为0px,高度为0px的

以下是从developer中显示的元素:

<div class="item" style="width: 0px; height: 0px;">
    <img src="url.com/img.jpg" alt="">
</div>

如何管理jquery在加载图像时获取图像大小?

示例

试试这个:

$('.item').each(function () {
    var $this = $(this);
    var img = $this.find('img');

    if(!img.length) return;

    img[0].onload = function () {
        var w = img.width(),
            h = img.height();
        $this.width(w).height(h);
    }
});

您需要在加载所有DOM元素后启动脚本。这也是一个很好的做法。因为您使用的是jQuery,所以只需使用
.ready()
事件启动脚本

下面是代码片段

$(文档).ready(函数(){
$('.item')。每个(函数(){
变量$this=$(this),
pic=$this.find('img');
如果(图片加载){
var w=pic.width();
var h=图片高度();
$this.宽度(w).高度(h);
}否则{
返回;
}
});
警报(“宽度:“+$('.item').width()+”&高度:“+$('.item').height());
});

在查询图像的高度和宽度之前,需要等待图像加载

下面是代码片段

$(document).ready(function(){/*刚刚添加了这个部分*/
$('.item')。每个(函数(){
变量$this=$(this),
$img=$this.find('img');
$img.load(函数(){
var w=$this.find('img').width();
var h=$this.find('img').height();
警报(“宽度:+w+”,高度:+h);
$this.宽度(w).高度(h)
});
;
});
}); /* 刚刚添加了此部分*/


您的图像尚未加载,所以没有大小的图片。是否有办法将其延迟到图像加载后?Sai的答案是错误的。因为它不等待图像加载。我无法将其添加为注释,因此这篇博文在您的浏览器中运行的唯一原因是浏览器已经缓存了图像。尝试清除浏览器缓存并运行代码。
$('.item').each(function () {
    var $this = $(this);
    var img = $this.find('img');

    if(!img.length) return;

    img[0].onload = function () {
        var w = img.width(),
            h = img.height();
        $this.width(w).height(h);
    }
});