在轮播中保持图像长宽比 [英] Maintain image aspect ratio in carousel

问题描述

我使用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％的宽度，但保持其高度500px（我认为它是500px ）这意味着在较小的屏幕上，我们看不到图像的最左边和最右边。

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％ / code>图片将不会大于视口。您需要在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; code>添加在底部。这是默认的最大宽度值，并取消设置限制。

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

这里< a>您的小提琴已更新。

Here's your fiddle updated.

这篇关于在轮播中保持图像长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！