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

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

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

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

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

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

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

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

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

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

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

CSS如何控制截取图片的最中间的部分
© 长短途