首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery计算来自服务器的img的实际高度/宽度值

要计算来自服务器的img元素的实际高度和宽度值,可以使用jQuery的height()width()方法。首先,需要确保img元素已经加载完毕并且已经获取了元素对象,然后使用height()width()方法获取实际的高度和宽度值,并赋值给相应的CSS属性,即可在网页中显示正确的高度和宽度。

下面是一个示例代码:

代码语言:javascript
复制
$(document).ready(function(){
    // 确保img元素已经加载完毕
    var img = $('.my-img');
    img.load(function(){
        // 获取元素对象并计算实际高度和宽度值
        var height = img.height();
        var width = img.width();
        // 将值赋给CSS属性,显示正确的高度和宽度
        img.css({'height': height + 'px', 'width': width + 'px'});
    });
});

注意,在上述代码中,$('.my-img')选择器可以选择需要计算实际高度和宽度值的img元素,load()事件监听器可以确保元素已经加载完毕,height()width()方法可以获取实际的高度和宽度值,最后将值赋给CSS属性即可在网页中显示正确的高度和宽度。

另外,如果需要实现自动计算图片实际大小,可以在img元素上添加一个data-original-src属性,将图片的原始地址存储在其中,然后在load()事件监听器中,通过$(this).attr('src')获取图片的原始地址,并使用img.load()方法监听图片的加载状态,在图片加载完毕后,使用img.attr('src', $(this).data('original-src'))将原始地址重新赋值给img元素的src属性,即可实现自动计算图片实际大小的功能。

需要注意的是,如果图片的原始地址不在服务器的HTTP响应中,那么需要将图片上传到服务器,并将上传后的地址存储在data-original-src属性中,否则将无法自动计算图片的实际大小。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券