HTML中img标签只表现图片中心位置的要领(三种要领)

html中 img标签表现图片中心的要领今朝知道三种，在此记录一下

第一种：用到css的clip:rect(top right bottom left);用法，必要共同position: absolute行使：如下

<img src=http://www.jb51.net/web/"http:/img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg" style="position: absolute;clip: rect(0px,250px,200px,50px);width: 300px;height: 200px">

配置图片的width和height相等于图片现实宽高的等比例缩放，再用rect要领来配置图片的剪切范畴。

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

<style type="text/css"> img { background-image: url();//配置配景图片 background-repeat: no-repeat;//配景图像将仅表现一次。 background-attachment: scroll;// background-position: -50px 0px;//配置配景图片的的偏移量，这个-50相等于配景整体向左偏移50，就可以表现图片的中心 background-size: 300px 200px;////配置配景图片的巨细，相等于图片现实宽高档比例饿缩放的 background-color: transparent;// width: 200px;// height: 200px;// } </style>

用配景来节制图片表现中心位置，必要配置配景凭证图片的真实宽高档比缩放，然后偏移配景的移动量来节制图片的宽高，这个必要留意的是不能图片的src,img标签不配置src时辰，表现的图片会呈现一条灰色的边框，并且没有步伐去掉，border:0px也没有浸染，我之前的办理步伐是放一张默认的全透明的图片在src中，就可以办理了。

第三种：在div中包括img，用div的overflow: hidden;来节制，用起来较量机动，

<div style="width: 100px;height: 100px;overflow: hidden"> <img src=http://www.jb51.net/web/"http:/img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg" style="position: relative" id="img_id"> </div> <script> var img = document.getElementById("img_id"); var image = new Image(); var realWidth = 0;//储存图片现实宽度 var realHeight = 0;//储存图片现实高度 //获取图片的宽高 image.src = ""; //加载乐成的处理赏罚 image.onload = function () { realWidth = image.width;//获取图片现实宽度 realHeight = image.height;//获取图片现实高度 //让img的宽高相等于图片现实宽高的等比缩放，然后再偏移 if (realWidth > realHeight){ img.width = (100/realHeight)*realWidth;//等比缩放宽度 img.height = 100;//跟div高度同等 img.style.left = '-' + ((100/realHeight)*realWidth-100)/2 + 'px';//配置图片相对本身位置偏移为img标签的宽度-高度的一半 }else if (realWidth < realHeight){ img.width =100 ;//跟div高度同等 img.height = (100/realWidth)*realHeight;//等比缩放高度 img.style.top = '-' + ((100/realWidth)*realHeight-100)/2 + 'px';//配置图片相对本身位置偏移为img标签的高度-宽度的一半 }else { img.width =100 ; img.height = 100; } }; //图片加载失败的处理赏罚 img.onerror = function () { img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492076382452&di=04ebd6c4688b2ffbd8ae18e685234704&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D0c96dc86da33c895a62b907fe4235fc6%2F0823dd54564e9258d2bb2dff9f82d158ccbf4e17.jpg"; img.width =100 ; img.height = 100; } </script>

上面注释已经很清晰了，首要是div节制了巨细，img标签按照div的巨细来调理自身的巨细。在举办偏移，从而到达表现图片中间部门的图片。小我私人认为第三种要领较量好用。

以上所述是小编给各人先容的HTML中img标签只表现图片中心位置的要领(三种要领)，但愿对各人有所辅佐，假如各人有任何疑问请给我留言，小编会实时回覆各人的。在此也很是感激各人对剧本之家网站的支持！

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!