在轮播中保持图像纵横比

问题描述：

我正在使用 Bootstrap 创建轮播，我有大图像，所以当屏幕小于图像时，不会保持比例.

I am using Bootstrap to create a carousel, I have large images so when the screen is smaller than the image, the ratio is not kept.

我该如何改变?

这是我的代码:

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

http://jsfiddle.net/DRQkQ/

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

I need the image to fit 100% width but keep its height of 500px (I think it's 500px) this should mean that on smaller screen we don't see the far left and far right of the image.

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

I tried containing the image in a div and add

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

但它不起作用

谢谢！

答

问题出在 Bootstrap CSS 上:

The issue lays here, on bootstrap CSS:

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

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

Having set max-width: 100%; the image won't be any larger than the viewport. You need to override that behavior on your CSS:

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

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

Note the max-width: none; added at the bottom. This is the default max-width value and unsets the limit.

这是你的小提琴更新了.

在轮播中保持图像纵横比

相关推荐