html中 img標簽顯示圖片中心的方法目前知道三種，在此記錄一下

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

 img src= http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg  >
設置圖片的width和height相當于圖片實際寬高的等比例縮放，再用rect方法來設置圖片的剪切范圍。
- 第二種：用img的background屬性：

 style type= text/css  img { background-image: url(http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);//設置背景圖片 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中，就可以解決了。
第三種：在p中包含img，用p的overflow: hidden;來控制，用起來比較靈活，

 p >
上面注釋已經很清楚了，主要是p控制了大小，img標簽根據p的大小來調節自身的大小。在進行偏移，從而達到顯示圖片中間部分的圖片。個人覺得第三種方法比較好用。
以上就是HTML中三種方法實現img標簽只顯示圖片中心位置的示例代碼的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。