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,當頁面大小變化時，圖片父節點已經加載完畢，大小已控制，此時圖片的寬高就會是頁面大小改變前的寬高，顯示的圖片的位置會有問題，刷新即可解決，或者做一個頁面大小變化時的處理即可。