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,当页面大小变化时，图片父节点已经加载完毕，大小已控制，此时图片的宽高就会是页面大小改变前的宽高，显示的图片的位置会有问题，刷新即可解决，或者做一个页面大小变化时的处理即可。