Question

引导程序的大小设置属性不适用于图像。如果我尝试对它们进行内联样式设置，则一切都会按计划进行，但是每当我尝试将其设置为h-100时，该规则便不再适用于图像。有人可以解释一下为什么h-100不起作用吗？

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100 h-100" src="img/hero-bg_1.jpg" alt="First slide">
      <h1> Denim Jackets </h1>
    </div>


    <div class="carousel-item">
      <img class="d-block w-100" src="img/hero-bg_2.jpg" alt="Second slide" style="height: 100vh">
      <h1> text on the second page </h1>
    </div>


    <div class="carousel-item">
      <img class="d-block w-100" src="img/hero-bg_3.jpg" alt="Third slide" style="height: 100vh">
      <h1> text on the third page </h1>
    </div>

  </div>

  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

谢谢！

Answer 1

很抱歉，您不能直接将宽度或高度应用于图像标签。通过以下方式使用该结构。

 <div class="h-25 d-inline-block" style="width: 120px;
 background-color: rgba(0,0,255,.1)"> <img class="rounded mx-auto
d-block" src="img/hero-bg_2.jpg" alt="Second slide" style="height:
 100vh"></div

Answer 2

在您的情况下，您仅将h-100应用于active轮播图片。它没有被应用，因为您的父元素没有固定的高度。将height设置为active类并进行检查。

.active{ height:100vh; }

大小调整不适用于使用引导程序的图像

2 个答案: