css实现图片剪裁

也许，你会遇到这样的情况，UI给你一张图片，然而根据实际情况，比如需要适配XXX手机，或者需要把图片形状搞好看一点，会让前端人员进行图片剪裁工作。

现在我们就已这个例子来对图片进行剪裁

html代码如下

  <div class="img-container">
      <img src="./黑人问号.jpg" alt="黑人问号"/>
  </div>

css代码如下

  .img-container {
      width: 300px;
  }
  .img-container img {
      width: 100%;
  }

图片下面进行剪裁

现在的需求是这样的：原来尺寸是width为300px，height为300px的图片。

现在要把图片下面剪裁100px

只需要将css改为

 .img-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
 }
.img-container img {
    width: 100%;
 }

具体思想就是:把img容器的高度设置成需要的高度，然后设置overflow:hidden就可以了。

图片上面进行剪裁

比如我们把上面剪裁100px，变成这样

css代码只需要改为：

  .img-container {
     width: 300px;
   }
  .img-container img {
     width: 100%;
     margin-top: -100px;
  }

上下都剪裁

比如把上下都剪裁50px 效果如下：

思路：首先我们知道上下剪裁50px，那么原来高300px，现在只有200px,如果直接设置200px，就跟第一个例子一样，把下面剪裁了100px，根据上一个例子的思路，我们如果设置img的margin-top为负的，既可以把图片位置向上移。所以现在css代码如下：

  .img-container {
     width: 300px;
     height: 200px;
     overflow: hidden;
  }
  .img-container img {
     width: 100%;
     margin-top: -50px;
  }

当然学会了上下剪裁，左右剪裁都是类似的思路。

圆形剪裁

这种一般用于圆形头像

思路：首先把container的width和height设置成宽高一样，然后设置img的 border-radius为容器宽高的一半就可以了

css代码：

  .img-container {
     width: 300px;
     height: 300px;
  }
  .img-container img {
     width: 100%;
     border-radius: 150px;
  }