要计算来自服务器的img元素的实际高度和宽度值,可以使用jQuery的height()
和width()
方法。首先,需要确保img元素已经加载完毕并且已经获取了元素对象,然后使用height()
和width()
方法获取实际的高度和宽度值,并赋值给相应的CSS属性,即可在网页中显示正确的高度和宽度。
下面是一个示例代码:
$(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
属性中,否则将无法自动计算图片的实际大小。
领取专属 10元无门槛券
手把手带您无忧上云