本文介绍了一种使用JavaScript控制移动端图片大小的方法。通过获取图片原始尺寸,判断其是否超过设定的基准宽度(如320px),若超出则按比例计算并设置新的宽高,从而实现图片随屏幕分辨率自动调整,确保在移动设备上显示正常。
JS实现移动端图片自适应缩放代码示例
具体实现示例如下:
<script type="text/javascript">
var ObjImg = jQuery(".Dy_Content img");
for (var i = 0; i < ObjImg.length; i++) {
loadImage(ObjImg.eq(i));
}
function loadImage(Obj) {
var b_width = 320;
var img = new Image();
img.src = jQuery(Obj).attr("src");
if (img.complete) {
var i_width = img.width;
var i_height = img.height;
if (i_width > b_width) {
var bx = b_width / i_width;
jQuery(Obj).width(b_width);
jQuery(Obj).height((bx * i_height).toFixed(0));
}
return;
}
img.onload = function () {
var i_width = this.width;
var i_height = this.height;
if (i_width > b_width) {
var bx = b_width / i_width;
jQuery(Obj).width(b_width);
jQuery(Obj).height((bx * i_height).toFixed(0));
}
};
};
</script>
上述内容即为利用JavaScript实现移动端图片根据分辨率自动调整大小的完整方案,供读者参考。