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为299px的图片。

image.png

css代码只需要改为：

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

具体做法：设置图片的margin-top，然后把容器的overflow设置为hidden

上下都剪裁

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