Twitter Bootstrap Carousel不伸展背景图像

Question

我希望旋转木马按比例缩放背景图像

在这个问题Bootstrap Carousel Image does not scale proportionately中，建议将图像保留为显式尺寸，但我无法理解其含义。

Answer 1

在 HTML

中设置此项

对于轮播中的每个img元素，您可以将width属性设置为此100%（尽管如果自然分辨率大于控件，则不需要）：

<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'>

• 通常情况下，此图片太小而无法完全展开，但100％会对其进行扩展。
• 确保您没有将width或height设置为任何像素大小

jFiddle

由于图像将全屏显示，因此您应该尝试使用自然会尝试占用可用宽度的分辨率。当浏览器必须向上扩展图像时，它将导致伪像。

Answer 2

它们的意思是从图像（或图像样式）中省略width = px和height = px。您可以设置width =“100％”并保留高度。浏览器将按比例缩放。

Answer 3

尝试此选项时不使用内联样式。只需将其添加到样式表即可覆盖bootstrap.css样式。

.carousel .item {
width: 100%;
/*slider width*/
max-height: 600px;
/*slider height*/
}
.carousel .item img {
width: 100%;
/*image width*/
}