Question

我正在制作BS Carousel。当浏览器较小且文本不保持居中时，图像看起来不合适并且不会完全覆盖旋转木马。我怎么能搞清楚这一点？我还没有找到可以帮助我的答案。

这是我的CSS：

   .carousel-inner {
   height: 400px; }

    .carousel-caption {
    padding-bottom: 30%;
   }

以下是网站：＆＃39; http://machinist-alec-32224.bitballoon.com＆＃39;

Answer 1

您需要使图像响应。这样的事情：

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

.responsive-image{
        height:auto;
        width:100%;
    }

Answer 2

目前你的.carousel-caption的底部填充设置为30％。在较大的屏幕上，填充将标题移出旋转木马。您应该将其更改为保证金。

此外，您的图片会拉伸，因为您给了它们固定的高度，但同时您希望它们伸展直到它们填充100％的网站宽度。您应该设置固定高度和旋转木马项目，而不是图像。

这个CSS应该会有更好的结果：

.carousel-caption {
    margin-bottom: 125px;
}
.carousel-inner> .item {
    margin: 0 auto;
    height: 500px;
}
.carousel .item > img {
   height: auto;
   min-height:500px;
   min-width: 100%;
}

BS轮播图像在移动设备和较小尺寸的浏览器上扭曲

2 个答案: