【问题标题】：Twitter Bootstrap Carousel Not Stretching Background ImagesTwitter Bootstrap Carousel 不拉伸背景图像
【发布时间】：2016-05-20 15:25:16
【问题描述】：

我希望轮播按比例缩放背景图片

在这个问题Bootstrap Carousel Image does not scale proportionately 中，建议保留图像的显式尺寸，但我不明白这是什么意思。

【问题讨论】：

嗨@lowcoupling，我看到你正在使用Bootstrap的轮播！友好的建议：为了获得最佳答案，请尝试提出Short, Self Contained, Correct, Examples 的问题。有时奇怪的行为只存在于您的代码中，因此很难在互联网上为陌生人重现。最好的策略通常是发布一些代码，并指出哪些不工作。

【解决方案1】：

在你的 HTML 中设置它

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

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

jFiddle

由于图像将全屏显示，您应该尝试选择一个自然会尝试占据可用全宽的分辨率。当浏览器必须放大图像时，会导致伪影。

【讨论】：

【解决方案2】：

他们的意思是从图像（或图像样式）中去掉 width=px 和 height=px。您可以设置 width="100%" 并保留高度。浏览器将为您按比例缩放。

【讨论】：

【解决方案3】：

试试这个不带内联样式的选项。只需将其添加到您的样式表中即可覆盖 bootstrap.css 样式。

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

【讨论】：