有没有办法控制div容器内的轮播图片

Question

我有以下引导代码，使用 w-100 显示图片以跨越页面的整个宽度。问题是我希望图像对用户可见并且足够小，这样他们就不必切换光标来查看整个图像。 `

 <h1 class="text-center p-3 mb-3 mt-3">Welcome to My Place</h1> <!--p is paragraph mb is marginn bottom and mt is margin top -->
    <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/assault_01.jpg"  class="d-block w-100" alt="assault">
    </div>
    <div class="carousel-item">
      <img src="/2023_k_johnson_scholarship_2023.jpg"  class="d-block w-100" alt="scholarship">
    </div>
    <div class="carousel-item">
      <img src="books_reading.jpg"  class="d-block w-100" alt="books">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</div>   `
type here

我编写了上面的代码以在轮播中显示。它使用 w-100 但页面上的图像太大

Answer 1

<style>
  /* Custom CSS to limit the max height of carousel images */
  .carousel-image {
    max-height: 400px; /* Adjust this value to your desired maximum height */
  }
</style>

<div class="carousel-item active">
  <img src="/assault_01.jpg" class="d-block w-100 carousel-image" alt="assault">
</div>
<div class="carousel-item">
  <img src="/2023_k_johnson_scholarship_2023.jpg" class="d-block w-100 carousel-image" alt="scholarship">
</div>
<div class="carousel-item">
  <img src="books_reading.jpg" class="d-block w-100 carousel-image" alt="books">
</div>