背景图片缩放显示在元素的正中央

前言：
想让图片显示在元素的中央，如果采用
img{margin:auto;display:block;}
的话，图片只会在水平中央而不会垂直中央。
后来我发现如果让图片变成元素的背景图。采用
#img{height:153px; width:100%;display:block;background-position:center;background-repeat:no-repeat;}
（注意：元素的高宽须设置，不然元素会塌陷为0，背景图不能被显示）
可以让元素的背景图缩放显示在元素的正中央。但是如果设置背景图宽度和高度都100%有时候会拉伸或者压缩；如果只设置宽度100%那么当图片是宽度小于高度的时候，图片会溢出；如果只设置高度100%那么当高度小于宽度的时候图片也会溢出；

解决：条件判断：当实际背景图的宽度大于高度的时候，设置它在元素里宽度100%；当实际背景图的高度大于宽度的时候，设置它在元素里高度100%；

不知道为什么当宽度大于高度的时候虽然showimg的class名字增加了imgw，但是样式仍然无效。所以我只好让#img背景图宽度100%，添加这样一个样式background-size:100%。然后当高度大于宽度的时候会覆盖掉这个样式变成高度100%。

<a id="img"  style="background-image:url(images.jpg);">

<style>
.imgh{background-size:auto 100% !important;};
.imgw{background-size: 100% !important;};
</style>

<!--这是页面未加载完前就执行-->
<script>
    //因为页面未加载完我们无法通过标签取得图片路径，只能自己赋值
    var image = new Image();
    image.src = "images.jpg";
    var width = image.width,
        height = image.height;
        		
$(document).ready(function () {
    //alert('width =' + width + ', height = ' + height) 
	if(image.width<image.height){
		$("#img").addClass("imgh");
	}else{
	    $("#img").addClass("imgw");
	}

});
</script>

<!--这是页面加载完后才执行-->
<!--<script>
 window.onload = function() {

    var imageSrc = document
                    .getElementById('hello')
                     .style
                      .backgroundImage
                       .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
                        .split(',')[0];

    var image = new Image();
    image.src = imageSrc;

    var width = image.width,
        height = image.height;

   // alert('width =' + width + ', height = ' + height)    
   if(image.width<image.height){
		$("#img").addClass("imgh");
	}else{
	    $("#img").addClass("imgw");
	}

}
</script>-->