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

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

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


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

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

时间:2024-10-15 01:42:47
1、首先我们整一张demo图片,以及示例代码,然后用浏览器浏览看看
2、思路1.下面我们来介绍第一种思路,使用css的clip属性对图片进行裁剪,具体代码如下
3、运行结果如图所示,实现了裁剪图片的需求,但是实际图片大小还是500px;所以并不是很推荐这种方法
6、思路3(推荐).用div包裹一个img,设置div的大小为要蹿轰辞翎裁剪的大小,再设置img相对DIV的位移,就可以实现需要的效果,代码如图
7、运行结果如图,试下了效果,这种方法相对比较灵活,推荐使用