html中 img标签显示图片中心的方法目前知道三种,下面小编把他分享到本站平台,需要的朋友参考下
html中 img标签显示图片中心的方法目前知道三种,在此记录一下
第一种:用到css的clip:rect(top right bottom left);用法,需要配合position: absolute使用:如下
@@##@@
设置图片的width和height相当于图片实际宽高的等比例缩放,再用rect方法来设置图片的剪切范围。
- 第二种:用img的background属性:
立即学习“前端免费学习笔记(深入)”;
用背景来控制图片显示中心位置,需要设置背景按照图片的真实宽高等比缩放,然后偏移背景的移动量来控制图片的宽高,这个需要注意的是不能图片的src,img标签不设置src时候,显示的图片会出现一条灰色的边框,而且没有办法去掉,b图片0er:0px也没有作用,我之前的解决办法是放一张默认的全透明的图片在src中,就可以解决了。
第三种:在p中包含img,用p的图片1: hidden;来控制,用起来比较灵活,
上面图片2已经很清楚了,主要是p控制了大小,img标签根据p的大小来调节自身的大小。在进行偏移,从而达到显示图片中间部分的图片。个人觉得第三种方法比较好用。











