在旋转木马中保持图像纵横比

Question

我使用引导创建旋转木马，我有大的图像，所以当屏幕小于图像时，比例不会保持不变。

我怎么能改变呢？

这是我的代码：

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

http://jsfiddle.net/DRQkQ/

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

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

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

但这不管用

非常感谢。

Answer 1

删除旋转木马项目内的img标签并添加背景。通过这种方式，您可以使用CSS3 cover属性。

.item1 {
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 2

我认为最好使用CSS3对象拟合属性来处理它。

如果您有固定宽度和高度的图像，并且仍然想要保留长宽比，您可以使用对象匹配：包含；。它将保持给定高度和宽度的比率。

例如：

img {
        height: 100px;
        width: 100px;
        object-fit: contain;
}

您可以在这里找到更多详细信息：http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

希望这对某人有用。

Answer 3

问题在于引导CSS：

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

已设置<代码>最大宽度：100% 图像不会比视口大。您需要在CSS上覆盖该行为：

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

注意<代码>最大宽度：无 添加在底部。这是默认的最大宽度值，并取消了限制。

这是你的小提琴。