图片以固定大小显示

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

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

图片以固定大小显示_第1张图片

    下面直接通过上案例:

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

图片以固定大小显示_第2张图片

案例碰到的雷区----

 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)


你可能感兴趣的:(图片,字符串比较,固定比例)