微信小程序-js-处理网页图片宽度自适应屏幕宽度-小程序webview-图片自适应

时间：2018-04-26 20:20:51 作者：江节胜来源：胜行天下网阅读：485 评论：0

特别注意：微信小程序webview中加载网页会有缓存，第二次进来会导致不能设置图片宽高，所以url要加上时间戳，即 _url += ("&rand=" +new Date().getTime());

	
							window.onresize = function() { 
						
							    resizeImg(); 
						
							} 
						
							window.onload = function() { 
						
							    resizeImg(); 
						
							} 
						
							function resizeImg() { 
						
							    $(function() { 
						
							        var w = $(".w").width(); //容器宽度 
						
							        $(".w img").each(function() { //如果有很多图片，我们可以使用each()遍历 
						
							            var img_w = ($(this).width()); //图片宽度 
						
							            var img_h = ($(this).height()); //图片高度 
						
							            if (img_w > w) { //如果图片宽度超出容器宽度--要撑破了 
						
							                var height = (w * img_h) / img_w; //高度等比缩放 
						
							                //alert("img_w=" + img_w + "img_h=" + img_h + "w=" + w + "height=" + height) 
						
							                $(this).css({ //不要加单位 
						
							                    "width": w, 
						
							                    "height": height 
						
							                }); //设置缩放后的宽度和高度 
						
							            } 
						
							        }); 
						
							    }); 
						
							}