Bootstrap轮播从底部展开图像

Question

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

你可以看到网站和代码here。

Answer 1

您可以将bottom: 145% 设置为img-tag 并将其移动到包装.item-class 的顶部。 .item, .carousel-inner, .carousel-classes 需要修复 height-property 才能使其工作。

像这样：

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

只需在物业周围玩耍以找到最佳位置。