在转盘中保持图像宽高比

Question

我正在使用Bootstrap创建一个旋转木马,我有大图像所以当屏幕小于图像时,不保持比例.

我怎么能改变呢？

这是我的代码:

.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

这个问题在这里,在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;底部添加的内容.这是默认的最大宽度值并取消设置限制.

这是你的小提琴更新.

Answer 2

我认为用CSS3 object-fit属性处理它会更好.

如果您的图像具有固定的宽度和高度,并且仍然希望保留纵横比,则可以使用object-fit:contain;.它将保持给定高度和宽度的比率.

例如 :

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

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

希望这对某人有用.

Answer 3

删除img轮播项目内的标签并添加背景.通过这种方式,您可以使用CSS3封面属性.

.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;
}