CSS如何控制截取图片的最中间的部分

 时间:2024-10-15 01:42:47

1、首先我们整一张demo图片,以及示例代码,然后用浏览器浏览看看

CSS如何控制截取图片的最中间的部分CSS如何控制截取图片的最中间的部分

2、思路1.下面我们来介绍第一种思路,使用css的clip属性对图片进行裁剪,具体代码如下

CSS如何控制截取图片的最中间的部分CSS如何控制截取图片的最中间的部分

3、运行结果如图所示,实现了裁剪图片的需求,但是实际图片大小还是500px;所以并不是很推荐这种方法

CSS如何控制截取图片的最中间的部分

4、思路2.下面我们来介绍第二种思路,把图片作为一个DIV的背景,再通过设置这个DIV的背景位移实现裁剪的效果。代码如图所示

CSS如何控制截取图片的最中间的部分CSS如何控制截取图片的最中间的部分

5、运行结果如图,实现了裁剪的功能,也解决了思路1的缺点,但是还是不够灵活。

CSS如何控制截取图片的最中间的部分

6、思路3(推荐).用div包裹一个img,设置div的大小为要蹿轰辞翎裁剪的大小,再设置img相对DIV的位移,就可以实现需要的效果,代码如图

CSS如何控制截取图片的最中间的部分CSS如何控制截取图片的最中间的部分

7、运行结果如图,试下了效果,这种方法相对比较灵活,推荐使用

CSS如何控制截取图片的最中间的部分
  • js如何对数组重新索引
  • 淘宝APP中的微调研在哪里可以参与?
  • css田字格布局
  • 如何使用HTML5中的新增几种input设置type类型
  • 怎么导入axure生成的html
  • 热门搜索
    快乐读书手抄报内容 文字手抄报 关于传统文化的手抄报 少先队员手抄报内容 好看的手抄报花边 春天的手抄报大全 生活中的数学手抄报 名胜古迹手抄报 关于龙的手抄报 平安手抄报内容