在ng-bootstrap模态中的div上安装ng-bootstrap轮播

Question

我一直在尝试正确设置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}}以使其响应。

Answer 1

为图像在容器内提供固定的高度（也具有固定的高度）。然后相应地放置轮播字幕，如下所示：

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*/
}

试玩直到满足您需要的值。

Answer 2

基本上，您只需要将高度降低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

Answer 3

经过数小时的了解，height，max-height及其与父标记的关系。我想出了解决方法。请在此处查看更新后的stackblitz。

基本上，我将图像调整大小以适合父内容，从而为父内容以及img设置了固定高度。因此，它将使图像自动调整大小以适合其父div。