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;
}