如何解决js获取屏幕大小并且让图片自适应的方法

 jQuery/js   高蒙   阅读(1584)   评论(0)   2016-09-08 17:47:13    图片自适应 js获取屏幕大小 


在写h5页面的时候,经常会需要将图片自适应大小,一般都是用等比例的缩放,这就有个问题,当上传的图片不是一个规格时就会出现展示图片不完美。

为了解决这个问题,我们可以通过js去获取图片的大小,然后在根据屏幕计算图片展示的实际大小,在通过之间的比例缩小图片,并且是不破坏图片质量的情况下居中展示图片。


效果如下:

QQ截图20160908173938.png

通过效果图可以看出,长图的展示效果,并不是等比例的收缩,而是在一定比例的情况下,展示图片内容的一部分。这样即达到了展示图片的效果,又解决了图片展示破坏美观的难点。

那么,下面来看是怎么通过js获取屏幕大小设置图片自适应的。

html代码:

<a href="" ><img src="" onload="ImgPosInitMob(this,1);"></a>

js代码:

<script>
        var imgContainerHeight ;
        function ImgPosInitMob(obj, type) {
            // 初始化父级元素的宽高
            imgContainerHeight = ($(window).width() - 10) / 2; // 两张图情况 边距10px
            $(obj).parent().height(imgContainerHeight);
            $(obj).parent().width(imgContainerHeight);
            // 设置img图片的宽高
            var img = $(obj);
            if (!type) type = 1;
            if (typeof obj.naturalWidth != "undefined") {
                var realWidth = obj.naturalWidth;
                var realHeight = obj.naturalHeight;
                var standwidth = $(img.parent()).width();
                var standheight = $(img.parent()).height();
                var tempwidth = 0,tempheight = 0;
                var ratew = standwidth / realWidth,rateh = standheight / realHeight;
                if (type == 1) {
                    if (rateh >= ratew) {
                        tempheight = standheight;
                        tempwidth = realWidth * rateh;
                    } else {
                        tempwidth = standwidth;
                        tempheight = realHeight * ratew;
                    }
                } else if (type == 2) {
                    if (rateh <= ratew) {
                        tempheight = standheight;
                        tempwidth = realWidth * rateh;
                    } else {
                        tempwidth = standwidth;
                        tempheight = realHeight * ratew;
                    }
                }
                img.height(tempheight);
                img.width(tempwidth);
                img.css("margin-top", -(tempheight - standheight) / 2);
                img.css("margin-left", -(tempwidth - standwidth) / 2);
            }
        }
    </script>





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客