BS转盘图像在移动设备和较小尺寸的浏览器上失真

Question

我正在制作一个BS旋转木马。当浏览器较小，文本不居中时，图像看起来不合适，无法完全覆盖旋转木马。我该怎么想？我还没有找到能帮助我的答案。

这是我的CSS：

   .carousel-inner {
   height: 400px; }
    .carousel-caption {
    padding-bottom: 30%;
   }

这是网站：'http://machinist-alec-32224.bitballoon.com'

Answer 1

目前你的.corrousel标题的底部填充设置为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%;
}

Answer 2

您需要使图像具有相关性。类似的东西：

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">
.responsive-image{
        height:auto;
        width:100%;
    }