移动前端图片自适应两种常见情况解决方案_Css3.0_css2.0_html5

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Css3.0_css2.0_html5

移动前端图片自适应两种常见情况解决方案

夜鹰教程网来源：www.yyjcw.com 日期：2017-8-13 22:55:28

本文主要说的是Web中图片根据手机屏幕大小自适应居中显示，图片自适应两种常见情况解决方案。

本文主要说的是Web中图片根据手机屏幕大小自适应居中显示，图片自适应两种常见情况解决方案。开始吧

在做配合手机客户端的Web wap页面时，发现文章对图片显示的需求有两种特别重要的情况，一是对于图集，这种文章只需要左右滑动浏览，最好的体验是让图片缩放显示在屏幕有效范围内，防止图片太大导致用户需要滑动手指移动图片来查看这种费力气的事情，用户体验大大降低。二是图文混排的文章，图片最大宽度不超过屏幕宽度，高度可以auto。这两种情况在项目中很常见。另外，有人说做个图片切割工具，把图片尺寸比例都设定为统一的大小，但即使这样，面对各种大小的移动设备屏幕，也是无法适用一个统一方案就能解决得了的。而且如果需求太多，那服务器上得存多少份不同尺寸的图片呢？显示不太符合实际。

下面是图集类型，需求方要求图片高宽都保持在手机可视视野范围，js代码列在下面：

[javascript] view plaincopy

    <script type="text/javascript">
    $(function(){

    var imglist =document.getElementsByTagName("img");
    //安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持
    /*
    var _width = window.screen.width;
    var _height = window.screen.height - 20;

    var _width = document.body.clientWidth;
    var _height = document.body.clientHeight - 20;
    */
    var _width,
        _height;
    doDraw();

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

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

    function DrawImage(ImgD,_width,_height){
        var image=new Image();
        image.src=ImgD.src;
        image.onload = function(){
            if(image.width>30 && image.height>30){

                if(image.width/image.height>= _width/_height){
                    if(image.width>_width){
                        ImgD.width=_width;
                        ImgD.height=(image.height*_width)/image.width;
                    }else{
                        ImgD.width=image.width;
                        ImgD.height=image.height;
                    }
                }else{
                    if(image.height>_height){
                        ImgD.height=_height;
                        ImgD.width=(image.width*_height)/image.height;
                    }else{
                        ImgD.width=image.width;
                        ImgD.height=image.height;
                    }
                }
            }
        }

    }

    })
    </script>

注意：测试中发现安卓4.0+的系统对window.screen.width属性支持的不好，很多情况在首次加载时返回的屏幕像素不正确。本人的安卓2.3.3系统测试通过，支持该属性。据说，这是安卓系统的bug，可以通过setTimeout设置延时时间来解决这个问题。不过，这个方法，本人怎么测试都行不通。所以干脆还是另寻高明吧。发现window.innerWidth可以担此重任，没有发现兼容问题，ok。

下面是，第二种情况，图文并茂的文章类型。这时候只对图片宽度和手机宽度适应有要求，对高度不做限制，相对容易些。
改造上面的javascript代码，如下：

[javascript] view plaincopy

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

说明：代码中的resize函数，是捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示。当然了，前提是像我的项目一样，文章直接为富文本格式，图片的父级标签已经设定了text-align:center的居中属性。如果你的文章内容是直接调用第三方的，那么你可以在上面的javascript代码中添加相应的处理语句即可。

复制链接网友评论收藏本文关闭此页

上一条：手机前端布局之图片液态化下一条：移动前端开发自适应总结

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网