上传图片之样式问题

上传图片之样式问题

在开发中经常会遇到上传照片的时候，就像朋友圈发动态一样，你点击添加本地图片之后这样（如下图所示），这里的图片显然没有因为宽度或高度改变而变形

下面我介绍一下自己写的一种方法

主要就是通过判断原图片的宽高，如果width > height 那么裁剪掉的就是左右两边，如果height > width 那么裁剪掉的就是上下两边。

---

css 代码

.content {
     margin: 50px auto;
     width: 100px;
     height: 100px;
     overflow: hidden;
     position: relative;
     border: 10px solid #000;
 }
 img.prevImg {
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }

html代码块

    <!-- 第一张 -->
    <div class="content"><img src="./6p.png" width="100%" alt=""/></div>
    <!-- 第二张 -->
    <div class="content"><img src="desktop.jpg" width="100%" alt=""/></div>
    <!-- 第三张 -->
    <div class="content"><img src="6p.png" width="100px;" height="100px;" alt=""/></div>
    <!-- 第四张 -->
    <div class="content"><img src="desktop.jpg" width="100px;" height="100px;" alt=""/></div>
    <!-- 第五张 -->
    <div class="content">
        <img class="prevImg" src="./6p.png" alt=""/>
    </div>
    <!-- 第六张 -->
    <div class="content">
        <img class="prevImg" src="desktop.jpg" alt=""/>
    </div>

js 代码块

 $(".prevImg").each(function(idx, node){
       var thisW = node.width; // 获取图片的宽度
       var thisH = node.height;  // 获取图片的高度
       if( thisW < thisH ) {
           // 宽大于长
           node.style.width = "100%";
       }else {
           node.style.height = "100%";
       }
    })

最后结果如下，这里用了两张图片，一张是width>height（desktop.jpg），另一张是height>width（6p.jpg）。
图1 显示正常，图2显然是因为控制width所以高度不够，
图3，图4 限制了图片的宽度和高度，直接将图片变形；
图5，图6 则可以正常显示，这也就是咱们将要的效果

最后表明一下，本人是初出茅庐的前端菜鸟一枚，有些地方错误，还请各位路过的指出，本人将感激不尽，嘿嘿！