• 保存到桌面  加入收藏  设为首页
小程序

微信小程序-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
                }); //设置缩放后的宽度和高度
            }
        });
    });
}

有任何疑问或技术合作都可联系我

微信:767000122 【推荐】

QQ:596957738


相关评论

加我微信 596957738 (QQ同号)加我微信   QQ联系:596957738   地址:江苏省南京市雨花台区

苏公网安备32011402010305号

皖ICP备16019989号

江节胜的Gitee,江节胜的Git地址