BS 轮播图像在移动设备和较小尺寸的浏览器上失真答案

【问题标题】：BS carousel image distorted on mobile and on smaller size browserBS 轮播图像在移动设备和较小尺寸的浏览器上失真
【发布时间】：2014-10-23 07:36:36
【问题描述】：

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

这是我的 CSS：

   .carousel-inner {
   height: 400px; }

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

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

【问题讨论】：

标签： css twitter-bootstrap carousel

【解决方案1】：

目前您的 .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%;
}

【讨论】：

效果很好。我明白你的解释了，谢谢你的帮助！

【解决方案2】：

您需要使图像产生共鸣。类似的东西：

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

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

【讨论】：

谢谢你的帮助，费尔