如何适配Bootstrap 5轮播肖像和风景图像

Question

我正在尝试将第二张图像（即肖像图像）放入轮播中，但如果视口宽度为全屏，图库 div 会溢出并被切断。图像应居中并适合 .gallery 容器。 全屏 半屏

.gallery{
    height: 100vh;
    width: 70vw;
    margin: auto;
}
.picture{
    width: auto;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: auto;
}
#myCarousel .img1{
    background-image: url('./gal/img1.jpg');
}
#myCarousel .img2{
    background-image: url('./gal/img2.jpg');
}

    <div id= "myCarousel" class="carousel slide gallery">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
          </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class=" picture d-block w-100 img1" alt="..."></div>
            </div>
            <div class="carousel-item">
                <div class="picture d-block w-100 img2" alt="..."></div>
            </div>
        </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
    </div>

有人可以指出我缺少什么吗？任何帮助将不胜感激。

尝试将图像设置为背景，并对其进行对象拟合。

Answer 1

在 Bootstrap 5 中，您可以通过将轮播项目的高度设置为固定值并使用 CSS 控制图像长宽比来调整轮播以显示纵向和横向图像。以下是如何实现此目标的示例：

  .carousel-item img {
        object-fit: contain;
        height: 300px; /* Set the fixed height for the carousel items */
        width: 100%;
    }

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="path/to/landscape-image.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="path/to/portrait-image.jpg" class="d-block w-100" alt="...">
            </div>
            <!-- Add more carousel items as needed -->
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
            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="#carouselExampleControls"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>