保持轮播中的图像长宽比

我正在使用 Bootstrap 创建轮播，我有大图像，因此当屏幕小于图像时，不会保留比例。

我怎样才能改变这一点？

这是我的代码：

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

http://jsfiddle.net/DRQkQ/ http://jsfiddle.net/DRQkQ/

我需要图像适合 100% 宽度，但保持其高度为 500px（我认为是 500px），这应该意味着在较小的屏幕上我们看不到图像的最左边和最右边。

我尝试将图像包含在 div 中并添加

overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;

但这不起作用

谢谢你！

问题出在这里，关于 bootstrap CSS：

img {
  max-width: 100%;
  width: auto   9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

已设定max-width: 100%;图像不会比视口大。您需要在 CSS 上覆盖该行为：

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
  max-width: none;
}

请注意max-width: none;添加在底部。这是默认的最大宽度值并取消设置限制。

Here's http://jsfiddle.net/DRQkQ/1/你的小提琴更新了。