如何让长大于宽，宽大于长的图片能正常显示在一个区块内

现在有这么一个需求，在一个宽940px，高660px的区域内，里面有一张图，其图大小不确定，可能高大于宽，可能宽大于高，问题是要让这张图片在区域内能正常显示，比例不失调。

一开始想过若是宽大于到，则宽占100%，高大于宽时则高占100%。 问题在于，当图片为宽图时设置width：100%，而图片为长图时需设置height：100%。这样就需要使用js来判断操作，非常坑爹。

在网上查阅了资料后中和两篇文章，给出了解决办法。

第一篇文章， http://www.zhangxinxu.com/wordpress/?p=61 张鑫旭 ：大小不固定的图片、多行文字的水平垂直居中。

第二篇文章， https://github.com/xiangpaopao/blog/issues/9  里面提到了 background-size: contain;

所以解决方案是：

透明gif图片+背景定位

这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法，对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。

方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。下面就是此方法的实例表现。

嗯，得到完美解决！！！