原创

js-处理网页图片宽度自适应屏幕宽度

window.onresize = function () {
    resizeImg();
}

window.onload = function () {
    resizeImg();
}

function resizeImg() {
//小程序webview中加载会有缓存 第二次进来会导致不能设置宽高 所以url要加上时间戳
//_url += ("&rand=" +new Date().getTime());
    $(function () {
        var w = $(".w").width(); //容器宽度 378

        $(".w img").each(function () { //如果有很多图片，我们可以使用each()遍历
            var img_w = ($(this).width()); //图片宽度 982
            var img_h = ($(this).height()); //图片高度  915

            //982 915 378
            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//368 height
                }); //设置缩放后的宽度和高度
            }
        });
    });

    return;
    //$("img").css("max-width", "750px");

    var allimgs = document.getElementsByTagName("img");
    for (var i = 0; i < allimgs.length; i++) {
        var img = allimgs[i]
        //autoResizeImage(411, 0, allimgs[i]);
    }
}

function getWindowWidth() { //随浏览器宽口大小变化而变化
    var _windowWidth = document.body.clientWidth || document.body.offsetWidth || document.documentElement.clientWidth; //像像素（实际计算时用于获取屏幕高度 兼容IE）
    return _windowWidth;
}

function autoResizeImage(maxWidth, maxHeight, objImg) {
    var img = new Image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var w = img.width;
    var h = img.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (maxWidth == 0 && maxHeight == 0) {
        Ratio = 1;
    } else if (maxWidth == 0) {//
        if (hRatio < 1) Ratio = hRatio;
    } else if (maxHeight == 0) {
        if (wRatio < 1) Ratio = wRatio;
    } else if (wRatio < 1 || hRatio < 1) {
        Ratio = (wRatio <= hRatio ? wRatio : hRatio);
    }
    if (Ratio < 1) {
        w = w * Ratio;
        h = h * Ratio;
    }
    objImg.height = h;
    objImg.width = w;
}

正文到此结束

所属分类：前端基础

本文标签： JavaScript
本文链接： https://code.jiangjiesheng.cn/article/93
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

js-处理网页图片宽度自适应屏幕宽度

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息