如何实现固定图片高度和宽度，并且根据浏览器自适应？

Question

我想实现一个内容列表页面，在不同分辨率下所有的图片高度和宽度都保持统一。

我一开始想法是，固定一个尺寸，如果图片宽度过宽，就根据高度等比拉伸自动裁剪填充。如果图片高度过高，就根据宽度等比拉伸裁剪填充。

当在不同分辨率手机，和PC上浏览时候，图片还能根据大小做自动缩放。

不知道这个效果是用CSS或者HTML如何实现。

谢谢大牛指点。

Answer 1

如果不用JS来操作的话，那么你可以使用CSS中的背景图片方式。

1、把图片放到一个标签的background中；
2、这个标签的宽度和高度按照你的需求设置百分比（为了满足不同分辨率的自适应）；或者可以使用media来判断，然后给不同的宽度值；
3、给background-size设置一个属性值，这里应该来说是使用container（希望单词没写错）

基本上来说这样就差不多了，如果你还要满足一个等比要求的话，那么这里有一个URL，你可以参考一下：http://ons.me/493.html

Answer 2

参见这个答案：http://segmentfault.com/q/1010000004191017/a-1020000004200305

background-size: contain