加拿大预测网-在线预测

信息动态

网站设计是技术与创意的完美融合!

技术资讯

统一宽高的列表图片JS判断宽高自动截取中间最佳部分

2016-08-19 10:41:00

最近在研究QQ空间中图片列表中的图片JS自动判断宽高并截取中间最佳部分的代码应用于加拿大预测网-在线预测:青岛网站建设，这个效果用语言不太好表达，具体来说，就是在一个图片列表中，每个图片的宽高都是统一的🎃，但是因为图片本身会有的高，有的宽，这就需要根据图片宽高属性，如果꧙是高的图，就JS判断后宽度显示100%，高度截取中间部分，如果是宽图，则JS判断后高度显示100%，宽度截取中间部分。

如下图：起重机的那张宽型图，虽然图片高度像素比列表区域小，但是也会自动显示100%高度，同时截取图片宽度的中间部分。而第二张图片恰恰相反，因为是高型图片，所以宽ꩵ度100%，高度自动截取中间部分。

JS判断的语句如下：
<script type="text/javascript">
$(window).load(function() {
    $("#newscontent2 .img img").each(function() {
        var maxwidth = 224;
        var maxheight = 137;
        var thisHeight = $(this).height();
        var thisWidth = $(this).width();
        //如果宽为224
        var w224Height = thisHeight / (thisWidth / 224);
        //如果高为137
        var h137Width = thisWidth / (thisHeight / 137);
 
        if (w224Height > maxheight) {
            $(this).width(maxwidth);
            $(this).height(w224Height);
            $(this).css('left', '0');
            $(this).css('top', '50%');
            $(this).css('margin-top', -w224Height / 2);
 
        } else {
            $(this).height(maxheight);
            $(this).width(h137Width);
            $(this).css('top', '0');
            $(this).css('left', '50%');
            $(this).css('margin-left', -h137Width / 2);
        }
    });
});
</script>
 
CSS代码如下：
#newscontent2 li .img{ float:left; width:224px; height:137px;position:relative;overflow:hidden;}
#newscontent2 .img img{position: absolute; left: 50%; top: 50%; z-index: 999;}
 
这种效果，最大的好处就是无须手动ps图片宽高，就可以通过网站后台上传到图片列表，并且让图片不变形，显示图片最佳位置，增强用户体验。
 
0532-85810878 473587358 扫码添加微信

加拿大预测网-在线预测:扫码添加微信

 扫码关注公众号

加拿大预测网-在线预测:官方公众号

 2054585360