Twitter Bootstrap轮播不会拉伸背景图片

Question

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

在这个问题中Bootstrap Carousel Image does not scale proportionately，建议保留图片的明确尺寸，但我不理解它的含义。

- lowcoupling

---

嗨@lowcoupling，我看到你正在使用Bootstrap的Carousel！友情建议：为了获得最佳回应，请尽量提出一些简短，自包含，正确，示例的问题。有时候奇怪的行为只存在于你的代码中，所以很难为互联网上的陌生人复现。最好的策略通常是发布一些代码，并指出哪些部分有问题。 - KyleMit

Answer 1

将此设置为您的HTML

对于旋转木马中的每个img元素，您可以像这样设置width属性为100％（如果自然分辨率大于控件，则不需要这样做）：

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

• 通常，这张图片太小不能完全展开，但是100%会将其放大。
• 请确保您没有将width或height设置为任何像素大小。

jFiddle

由于图像将全屏显示，因此您应该尝试获取自然会尝试占用所有可用宽度的分辨率。当浏览器需要将图像放大时，会导致伪影。

- KyleMit

---

你应该使用CSS：.carousel .carousel-inner img { 宽度：100％; } - Ruben

我使用以下代码来为滑块设置固定高度：.carousel .carousel-inner .item { height: 460px; } - Ruben

Answer 2

他们的意思是在图像（或图像样式）中省略width = px和height = px。您可以设置width ="100％"并省略高度。浏览器将自动按比例缩放。

- Tim Mickey

---

我需要看看你的代码才能真正帮助你。但是尝试直接在img标签中设置width="100%"，就像这样：<img src="myimage.png" width=100%" /> - Tim Mickey

谢谢您，我正在尝试，但似乎不起作用。 我还尝试着 <img src="myimage.png" style="width=100%">。 - lowcoupling

我应该使用什么图像分辨率？ - lowcoupling

Answer 3

尝试使用没有内联样式的选项。只需将此添加到您的样式表中，以覆盖bootstrap.css样式。

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

- Nina Morena