引导程序中的相同行尺寸

Question

我正在尽力解释它。我正在使用引导程序。我有两列，左边一列是图像，右边另一列是标题和描述。我需要使照片填充列的整个可用区域，并在添加更多文本时自动增加其高度。像封面一样的东西。谢谢

我尝试在 CSS 中添加图像的高度，但它有一个常量值，并且应该是动态的。

    <div id="audi" class="row mt-4">
    <!-- Miejsce na karuzelę -->
    <div class="col-md-9 addpadding">
        <div id="myCarousel" class="carousel slide" data-interval="false">
            <!-- Wskaźniki (indicators) -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Slajdy karuzeli -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="car.jpg" alt="Audi - Zdjęcie 1" class="img-fluid custom-carousel-image">
                </div>
                <div class="carousel-item">
                    <img src="car1.jpg" alt="Audi - Zdjęcie 2" class="img-fluid custom-carousel-image">
                </div>
                <div class="carousel-item">
                    <img src="car2.jpg" alt="Audi - Zdjęcie 3" class="img-fluid custom-carousel-image">
                </div>
            </div>

            <!-- Strzałki nawigacyjne -->
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Poprzedni</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Następny</span>
            </a>
        </div>
    </div>
        <!-- Miejsce na tytuł i opis po prawej stronie -->
        <div class="col-md-3">
            <div class="d-flex flex-column justify-content-center h-100">
                <h2 class="pb-1 car-title">Audi</h2>
                <!-- Pill Badges w jednej linii z wyśrodkowaniem -->
                <div class="align-items-center mb-1 mt-1">
                    <span class="badge badge-pill badge-ultra mr-1"><i class="fa-regular fa-calendar"></i>&nbsp2022</span>
                    <span class="badge badge-pill badge-ultra mr-1"><i class="fa-solid fa-fire-flame-simple"></i>&nbsp310 KM</span>
                    <span class="badge badge-pill badge-ultra mr-1"><i class="fa-solid fa-shuffle"></i>&nbspAutomatyczna</span>
                    <span class="badge badge-pill badge-ultra"><i class="fa-solid fa-gas-pump"></i>&nbspBenzyna</span>
                </div>
                <p class="car-description mt-1">opis.</p>
                <!-- Przycisk "Dowiedz się więcej" -->
                <a href="#" class="btn-learn-more mt-1">Sprawdź</a>
                <div class="mt-3">
                    <h2 class="rent-info">Warunki</h2>
                    <ul class="rent-info-list">
                        <li><i class="fa-regular fa-circle-check"></i>1.</li>
                        <li><i class="fa-regular fa-circle-check"></i>2.</li>
                        <li><i class="fa-regular fa-circle-check"></i>3</li>
                        <li><i class="fa-regular fa-circle-check"></i>4.</li>
                    </ul>
                </div>
<div class="mt-2">
    <h2 class="priceHeader">Cennik</h2>
    <ul class="price-list">
        <li><strong>Doba:</strong>1 zł</li>
    </ul>
</div>
                </div>
            </div>
        </div>

CSS：

.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
}

Answer 1

将

height: 100%

放在

<img>

的父容器上，并将

object-fit: cover;

+

max-height: 100%

放在

<img>

的父容器上。

对象拟合文档