css - BS 旋转木马图像在移动设备和较小尺寸的浏览器上失真

Question

我正在制作一个 BS 轮播。当浏览器较小且文本未居中时，图像看起来不合适并且不会完全覆盖轮播。我该如何解决这个问题？我还没有找到可以帮助我的答案。

这是我的 CSS:

   .carousel-inner {
   height: 400px; }

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

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

Answer 1

现在您的 .carousel-caption 底部填充设置为 30%。在更大的屏幕上，填充会将字幕移出轮播。您应该将其更改为边距。

此外，您的图片会拉伸(stretch)，因为您给它们设置了固定的高度，但同时您希望它们会拉伸(stretch)，直到它们填满 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%;
}