美文网首页
css简单图片剪裁

css简单图片剪裁

作者: 勿忘巛心安 | 来源:发表于2018-01-15 15:08 被阅读17次

也许,你会遇到这样的情况,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
效果如下:

相关文章

  • css简单图片剪裁

    也许,你会遇到这样的情况,UI给你一张图片,然而根据实际情况,比如需要适配XXX手机,或者需要把图片形状搞好看一点...

  • css图片剪裁功能 clip

    2017-04-26 clip 见天学习了一个CSS2 的一个功能 clip 图片裁剪功能 clip: rect ...

  • 剪裁框和图片剪裁

    图片处理中经常用的图片剪裁,就是通过剪裁框确定图片剪裁的区域,然后剪去该区域的图片,今天实现了一下,其实图片剪裁本...

  • 图片剪裁

    做项目是经常会遇见需要对图片进行剪裁的情况,下面来点干货 是不是很简单啊,end。。。。

  • 剪裁图片

    -(UIImage *)imageWithImage:(UIImage *)image sizeScaletoSi...

  • 图片剪裁

    图片剪裁

  • iOS图片剪裁

    项目中需要对图片进行裁剪操作,所以封装了一个简单的剪裁图片的控件,当时的设想是能够根据剪裁框的区域自动放大或缩小,...

  • 第一堂:剪裁工具Crop Tool

    视频 剪裁工具(Crop Tool) 使用Crop Tool可以剪裁图片,旋转图片,和重新构图。 场景1)若图片中...

  • UIImage剪裁、压缩、拉伸等处理

    1. 图片剪裁方法 直接调用如下系统现成的图片剪裁方法,封装成- (UIImage *)imageByCropTo...

  • 自动剪裁图片

    原理 实现方法 使用方法 修改路径即可

网友评论

      本文标题:css简单图片剪裁

      本文链接:https://www.haomeiwen.com/subject/nyhfixtx.html