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

浏览数：35 / 时间：2015年06月11日

    <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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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