手机端 图片自适应屏幕尺寸

三世轮回 提交于 2020-01-18 09:15:46
    <script type="text/javascript">
        $(function () {
            var imglist = document.getElementsByTagName("img");
            //安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持
            var _width;
            doDraw();

            window.onresize = function () {
                //捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示
                doDraw();
            }

            function doDraw() {
                _width = window.innerWidth;
                for (var i = 0, len = imglist.length; i < len; i++) {
                    DrawImage(imglist[i], _width);
                }
            }

            function DrawImage(ImgD, _width) {
                var image = new Image();
                image.src = ImgD.src;
                image.onload = function () {
                    //限制,只对宽高都大于30的图片做显示处理
                    if (image.width > 30 && image.height > 30) {
                        if (image.width > _width) {
                            ImgD.width = _width;
                            ImgD.height = (image.height * _width) / image.width;
                        } else {
                            ImgD.width = image.width;
                            ImgD.height = image.height;
                        }

                    }
                }

            }

        })
</script>

  

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!