Question

我正在创建一个网站，我正在使用轮播引导程序，该网站是移动友好的，但我唯一的问题是滑块图像不会随图像缩小，所以它最终使它们看起来伸展。我尝试过最大宽度和最大高度100％，但它没有任何建议吗？我用过

<class="img-responsive">

但仍然不起作用。如果有人愿意去看看它会是什么，我已经修改了小提琴。我删除了高度500px，但仍然没有运气。

如果您调整浏览器的大小，您将明白我的意思，标题高度不会缩小。

这是索引页面的一个示例：

http://pastebin.ca/2648252

这是我的css

http://pastebin.ca/2648251

代码太长了，无法在此处发布，可以在那里看到无需下载。

感谢。

小提琴代码：jsfiddle.net/K56hT/5

当您使用img响应缩小浏览器时。调整大小时，它会将图像推出窗口。

Answer 1

主横幅看起来像是在示例上调整OK。请您提供进一步的信息来解释这个问题？根据屏幕尺寸的不同，横幅确实会丢失在您的顶部导航后面，但这是绝对定位的结果。

**更新**

我添加了一个新的小提琴，希望能够根据需要显示它，没有灰色框。可能值得您将原始的CSS和HTML与小提琴进行比较以识别所有更改，并确保我没有删除您在那里的任何其他原因，但关键更改是在旋转木马上的CSS定位并删除您已有的固定高度on .carousel和.carousel内部课程。

.carousel {
  margin-bottom: 60px;
}

.carousel .item {
  background-color: #777;
}

.carousel-inner > .item > img {
    display: block;
    position: relative;
    width: 100%;
}

它能解决这个问题吗？

http://jsfiddle.net/LSBFd/2/

使用浏览器自动调整图像大小

1 个答案: