html中 img标签显示图片中心的三种方法

html中 img标签显示图片中心的三种方法大家都知道吗？其实在html只要大家熟悉了解，很快就可以制作出来，今天就让爱站技术频道小编带你一起来了解一下吧！

html中 img标签显示图片中心的三种方法

第一种：用到css的clip:rect(top right bottom left);用法，需要配合position: absolute使用：如下

设置图片的width和height相当于图片实际宽高的等比例缩放，再用rect方法来设置图片的剪切范围。

- 第二种：用img的background属性：

用背景来控制图片显示中心位置，需要设置背景按照图片的真实宽高等比缩放，然后偏移背景的移动量来控制图片的宽高，这个需要注意的是不能图片的src,img标签不设置src时候，显示的图片会出现一条灰色的边框，而且没有办法去掉，border:0px也没有作用，我之前的解决办法是放一张默认的全透明的图片在src中，就可以解决了。

第三种：在div中包含img，用div的overflow: hidden;来控制，用起来比较灵活，

上面注释已经很清楚了，主要是div控制了大小，img标签根据div的大小来调节自身的大小。在进行偏移，从而达到显示图片中间部分的图片。个人觉得第三种方法比较好用。

以上所述是爱站技术频道小编给大家介绍html中 img标签显示图片中心的三种方法，希望对大家有所帮助，在此也非常感谢大家对爱站技术频道网站的支持！