响应式图片的 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, 剩余的部分隐藏了). 怎么组合呢?
======================================================================
如果图是 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;
}
代码没有测试过哦,慎用!
不考虑旧式浏览器的话,纯 css 的方法可以这样做,最大限度的撑大背景图并居中显示。
.img-responsive {
background-size: cover;
background-position: 50% 50%;
}
是这样的效果吧: http://jsfiddle.net/luin/3g5AZ/
我写过一篇文章介绍过具体的做法: http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/
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…