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

前言：
想让图片显示在元素的中央，如果采用
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%。