我一直在尝试正确设置css属性,以使ng-bootstrap轮播图片适合自定义ng-bootstrap模态内的给定空间(div)。观看此分叉的stackblitz代码。
从样本源中可以看到,图像与模态以及放置其的col-8
的给定空间(高度)重叠。
如何使轮播遵循其父级col-8
的大小?以免与模式大小重叠。
UPDATE
对于看不到问题的人,您可以访问实际的应用here
经过一番反复尝试之后,我到了这一点。仅carousel-inner
及其子项不遵循其父div,即ngb-carousel.carousel-modal
。看到下面的这张图片
如上图所示,我无法使carousel-inner
遵循其父级ngb-carousel.carousel-modal
的大小,而其父级carousel-modal
已遵循模态高度。它始终重叠并延伸到max-height:100%
高度。请注意,我将它们设置为{{1}}以使其响应。
答案 0 :(得分:0)
为图像在容器内提供固定的高度(也具有固定的高度)。然后相应地放置轮播字幕,如下所示:
img {
height: 650px; /*adjust for your project*/
width: auto !important;
}
@media only screen and (max-width:767px){
img { width: 100% !important
}
}
.carousel-caption {
position: absolute;
bottom: 20px;
left: 3%; /*adjust for your project*/
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
max-width: 50%; /*adjust for your project*/
}
试玩直到满足您需要的值。
答案 1 :(得分:0)
基本上,您只需要将高度降低100%即可。
要设置模式主体的高度,我设置了100%-模式标题高度(69px)。
.modal-body {
height: Calc(100% - 69px);
}
ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
height:100%;
}
Stackblitz:https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css
答案 2 :(得分:0)
经过数小时的了解,height
,max-height
及其与父标记的关系。我想出了解决方法。请在此处查看更新后的stackblitz。
基本上,我将图像调整大小以适合父内容,从而为父内容以及img设置了固定高度。因此,它将使图像自动调整大小以适合其父div。