我正在制作一个 BS 轮播。当浏览器较小且文本未居中时,图像看起来不合适并且不会完全覆盖轮播。我该如何解决这个问题?我还没有找到可以帮助我的答案。
这是我的 CSS:
.carousel-inner {
height: 400px; }
.carousel-caption {
padding-bottom: 30%;
}
最佳答案
现在您的 .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%;
}
关于css - BS 旋转木马图像在移动设备和较小尺寸的浏览器上失真,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26514380/