新手问题 [已解决] 图片 CSS：怎样才能 “响应式 + 固定宽高比例”？
问题：怎样才能“响应式 + 固定宽高比例”，多余的自动截掉？
响应式图片的 CSS
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
比如我原图是 500×300, 即原图是宽高比例 5:3。 我想要宽高比例是 5:2，响应式:max-width:100%, 而且多余的 overflow:hidden （即当 div 宽度为 500 的时候，只保留上面那 200 像素，变成 500×200, 剩余的部分隐藏了）. 怎么组合呢？
======================================================================
解决方法：见#15 楼
如果图是 5:3 而你要 5:2，图会变形，如果要保持图和比例不变 我能想到的一种办法是这样： 用一个透明的 png/gif w:h 为 5:2 的图片，如
<img src="transparent.gif" class="img-responsive" />
样式代码：
.img-responsive {
display: block;
max-width: 100%;
height: auto;
background-image: url(your-original-image-path);
background-size: cover;
}
代码没有测试过哦，慎用！
chairy11
#11
2014年01月26日
不考虑旧式浏览器的话，纯 css 的方法可以这样做，最大限度的撑大背景图并居中显示。
.img-responsive {
background-size: cover;
background-position: 50% 50%;
}
luin
#15
2014年01月27日
是这样的效果吧： http://jsfiddle.net/luin/3g5AZ/
我写过一篇文章介绍过具体的做法： http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/
ashchan
#16
2014年01月27日
HTML:
<p class="image-container">
<img src="xxx.png">
</p>
CSS:
p.image-container {
width: 100%;
height: 0;
padding-bottom: 60%;
overflow: hidden;
}
p.image-container img {
width: 100%;
}
这样做图片保持原比例，但只显示上方 40%。
卧槽……原来这么简单……我为了做全屏 img 伸缩写了好一阵子 coffee 呢………最后采用判断窗口长宽比然后选择图片是 width100% 还是 height100%………剩下参数一溜 auto…