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

<img src="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">

<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>

<div style="width: 100px;height: 100px;overflow: hidden">
<img src="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 = "http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg";
 //加载成功的处理
 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>