html - Bootstrap 轮播从底部展开图像

Question

我在一个网站中使用 Bootstrap 轮播，它是具有响应高度的屏幕的整个宽度。问题是，由于图像的性质，我希望图像与 .item div 的底部对齐，并从底部展开，而不是像往常一样从左上角展开。这可以在 CSS 中完成还是只能在 JS 中完成？

可以看到网址和代码here .

Answer 1

您可以将 bottom: 145% 设置为 img 标签并将其移动到包装 .item 类的顶部. .item、.carousel-inner、.carousel 类需要修复 height 属性才能正常工作。

像这样:

.carousel, .carousel-inner, .item {
   height:100%;
   max-height:600px;
}
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img {
   position: relative;
   bottom: 145%;
}

只需调整属性即可找到最佳位置。