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的图片。
黑人问号.jpg

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

黑人问号下.png

只需要将css改为

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

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

图片上面进行剪裁

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

黑人问号上.png

css代码只需要改为:

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

上下都剪裁

比如把上下都剪裁50px
效果如下:
黑人问号上下.png

思路:首先我们知道上下剪裁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;
  }

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

圆形剪裁

这种一般用于圆形头像
黑人问号圆.png

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

css代码:

  .img-container {
     width: 300px;
     height: 300px;
  }
  .img-container img {
     width: 100%;
     border-radius: 150px;
  }
Last modification:November 20th, 2018 at 10:05 pm

Leave a Comment