问题：怎样才能“响应式+固定宽高比例”，多余的自动截掉？ 有大用

问题：怎样才能“响应式+固定宽高比例”，多余的自动截掉？

响应式图片的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;
}
代码没有测试过哦，慎用!



下面的代码不错   见    http://jsfiddle.net/luin/3g5AZ/

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%。

来自 https://ruby-china.org/topics/17011