css - 轮播中使用的图像的高度与用于容纳轮播的 div 无关

Question

 .mainIDv
 {
 height:300px;
 width:400px;
 padding:5px; 
 margin: 8px auto 8px auto;
 }
 .ImgDisp{ 
     background-color:cyan;
     height:100%;
     width:100%;
 }
 .carousel-inner > .carousel-item > img {
    width: 100% !important;
    height: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="mainIDv">
<div class="ImgDisp">
  <div id="carouselSection" class="carousel slide" data-ride="carousel">
                        <ul class="carousel-indicators">
                            <li data-target="#carouselSection" data-slide-to="0"></li>
                            <li data-target="#carouselSection" data-slide-to="1"></li>
                            <li data-target="#carouselSection" data-slide-to="2"></li>
                        </ul>
                        <div class="carousel-inner">
                            <div class="carousel-item active">

                                    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Los Angeles" >
                                <div class="carousel-caption">
                                    <h3>Tomorrow land </h3>
                                    <p>We had good friends here!</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Chicago" style="width: 100%; height: 100%;">
                                <div class="carousel-caption">
                                    <h3>HappyLand</h3>
                                    <p>Thank you!</p>
                                </div>
                            </div> 
                        </div>
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                    </div> 
</div>
</div>

我尝试使用 bootstrap 4 的 carousel 创建幻灯片放映。我在 div block 中使用了 carousel 代码部分。但我的问题是轮播中使用的图像高度与持有它的 div 的高度不匹配。我厌倦了这里建议的所有解决方案，但没有一个对我有用。这是我的代码。

<div class="ImgDisp"> 
                    <div id="demo" class="carousel slide" data-ride="carousel">
                        <ul class="carousel-indicators">
                            <li data-target="#demo" data-slide-to="0" class="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                        </ul>
                        <div class="carousel-inner">
                            <div class="carousel-item active">

                                    <img src="Images/Img12.png" alt="Los Angeles" >
                                <div class="carousel-caption">
                                    <h3>Tomorrow land </h3>
                                    <p>We had good friends here!</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img src="Images/Img4.jpg" alt="Chicago" style="width: 100%; height: 100%;">
                                <div class="carousel-caption">
                                    <h3>HappyLand</h3>
                                    <p>Thank you!</p>
                                </div>
                            </div> 
                        </div>
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                    </div>  
                </div>

我想要高度和宽度与 div ImgDisp 100% 匹配的图像。我厌倦了覆盖为 carousel、carousel-inner、carousel-item 等组件定义的样式。但只有宽度对我有用。甚至尝试更改图像样式。

.carousel-inner > .carousel-item > img {
    width: 100% !important;
    height: 100% !important;
}

我不知道为什么，有人提出了解决方案。提前致谢。

Answer 1

在这种风格中，您将 img 高度覆盖了 10%

.carousel-inner > .carousel-item > img {
    width: 100% !important;
    height: 10% !important;
}

将其更改为 100%。