图片以固定大小显示

最新推荐文章于 2023-12-26 17:15:41 发布

weixin_34253539

最新推荐文章于 2023-12-26 17:15:41 发布

阅读量346

点赞数

文章标签： python

原文链接：https://my.oschina.net/zyxchuxin/blog/532221

版权

2019独角兽企业重金招聘Python工程师标准>>>

有的时候我们需要显示或者上传的图片大小比例（长宽比）并不一定和容器的大小比例一样，这个时候就需要对图片进行处理。比如图片所在容器的长宽比例是1:1，而实际图片的长宽比例是2:3，这时，我们需要显示图片的中间位置，首先使得图片缩放成和容器一样的比例1:1.5，然后（1.5-1）/2 = 0.25使得图片左右各自溢出0.25。

如下图所示：红线狂代表图片的显示区域，黑色线框代表实际的图片，其中x、y分别代表左右溢出的大小，其中x=y。

下面直接通过上案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>images</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        width:660px;
        height:200px;
        margin:20px auto;
        background: #ccc;
        position: relative;
        padding:20px;
    }
    .show{
        height:200px;
        width:200px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        border:2px solid #fff;
    }
    img{
        position: absolute;
    }
    .show+.show{
        margin-left:16px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="show"><img data-width="600" data-height="1065" src="images/images1.jpg" alt=""></div>
        <div class="show"><img data-width="1024" data-height="682" src="images/images2.jpg" alt=""></div>
        <div class="show"><img data-width="200" data-height="200" src="images/images3.jpg" alt=""></div>
    </div>
    <script>
    var imgs = document.getElementsByTagName("img") ;
    for(i=0,max=imgs.length;i<max;i++){ 
        var _width = imgs[i].getAttribute("data-width") ;
        var _height = imgs[i].getAttribute("data-height") ;
        var _size = _width-_height>0?_height:_width ;
        var _ratio = _size/200 ;
        if(_width-_height>0){
            imgs[i].style.height = "200px" ;
            imgs[i].style.width = _width/_ratio+"px" ;
            var _offleft = (_width/_ratio - 200 )/2 ;
            imgs[i].style.left = -_offleft + "px" ;
        }
        else{
            imgs[i].style.width = "200px" ;
            imgs[i].style.height = _height/_ratio+"px" ;
            var _offtop = (_height/_ratio - 200 )/2 ;
            imgs[i].style.top = -_offtop + "px" ;
        }
    }
    </script>
</body>
</html>

案例碰到的雷区----

 var _width = imgs[i].getAttribute("data-width") ;

通过getAttribute获得的值都是字符串，字符串大小比较：

"1024">"678"   //false
"1024"<"678"   //true

所以在案例中进行宽高大小比较的时候，不能直接使用_width>_height，可以使用以下三种方法，核心目的就是将字符串比较改成数值的比较：

 //方法一：相除(字符串相除时，会将字符串进行隐式转化为数字)
 _width/_height>1
 
 //方法二：相减(字符串相减时，会将字符串进行隐式转化为数字)
 _width-_height>0
 
 //方法三：将字符串转化成数字进行比较
 pareInt(_width)>parseInt(_height)

转载于:https://my.oschina.net/zyxchuxin/blog/532221