html - Twitter Bootstrap Carousel 不拉伸背景图像

Question

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

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

Answer 1

在你的HTML中设置它

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

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

• 通常，此图像太小而无法完全展开，但 100% 会放大它。
• 确保您没有设置width或height设置任何像素大小

小提琴

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

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*/
}