css 有没有办法控制div容器内的carousel图像

zf2sa74q 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(104)

我有下面的引导代码，显示图片使用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

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

css

来源：https://stackoverflow.com/questions/77331337/is-there-a-way-to-control-the-carousel-image-inside-the-div-container

1条答案

按热度按时间

lrpiutwd1#

<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>

赞(0）回复(0）举报 2023-10-21

我来回答

css 有没有办法控制div容器内的carousel图像

1条答案

相关问题

热门标签

最新问答