html中img图片截取显示中间部分

HTML中img标签只显示图片中心位置的方法

我之前在网上搜到其他的方法：

第一种：

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

<img src="图片地址" 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>

注意：background-size是图片的实际宽高比的等比例缩放大小，并且由于用的不是img的src属性，所以不能使用onerror以及onload方法，另外当图片没有src时，会出现一个灰色边框和一个图片icon：

解决办法：
css里添加一句：

img[src=""],img:not([src]){ opacity:0; }

但以上两种方法都需要知道图片的宽高比，然而需求的条件是：1.图片大小不确定 2.图片节点是动态生成的 3.要做图片加载错误的处理

所以方法三：

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

html代码：

<div class="img"> <img src="....." onerror="this.src=assets/pro-ping.png;" onload=imgOnload(this) /> </div>;

或者js动态加载节点：

js代码：

if(data.cover) { cover = ' <div class="img">' + ' <img src="' + data.cover + '" οnerrοr="this.src=assets/pro-ping.png;" οnlοad=imgOnload(this) />' + ' </div>'; }

css:

//外层容器要限制一下宽高和超出隐藏 .img { margin-bottom: 0.32rem; height: 3.5rem; border-radius: 0.16rem; background: #636363; overflow: hidden; }

js代码：

function imgOnload(e) { var wid = e.parentNode.offsetWidth;//父容器限制高度 var hei = e.parentNode.offsetHeight;//父容器限制宽度 var realWidth = e.width; //储存图片实际宽度 var realHeight = e.height; //储存图片实际高度 //获取图片宽高比 var realwh = e.width / e.height; if(realwh > wid/hei) { var w = ((hei / realHeight) * realWidth) + 'px'; var h = hei + 'px'; var l = '-' + ((hei / realHeight) * realWidth - wid) / 2 + 'px'; e.style.width = w; //等比缩放宽度 e.style.height = h; //跟div高度一致 e.style.left = l; //设置图片相对自己位置偏移为img标签的宽度-高度的一半 e.style.position = 'relative'; } else { var w = wid +'px'; var h = ((wid / realWidth) * realHeight) + 'px'; var t = '-' + ((wid / realWidth) * realHeight - hei) / 2 + 'px'; e.style.width = w; //等比缩放宽度 e.style.height = h; //跟div高度一致 e.style.top = t; //设置图片相对自己位置偏移为img标签的宽度-高度的一半 e.style.position = 'relative'; } }

效果
原图：

效果：

需要注意的是，由于我使用的是rem,当页面大小变化时，图片父节点已经加载完毕，大小已控制，此时图片的宽高就会是页面大小改变前的宽高，显示的图片的位置会有问题，刷新即可解决，或者做一个页面大小变化时的处理即可。