JS实现移动端图片根据屏幕分辨率自适应缩放

作者:青柠时间:2026-10-30 18:00:07浏览:614

本文介绍了一种使用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实现移动端图片根据分辨率自动调整大小的完整方案,供读者参考。

作者最新文章