我正在尝试用图像填充一行中的一列

Question

我正在尝试用图像填充使用引导程序制作的行的一列。我希望图像与行和图像中不适合要剪切的宽度的部分具有相同的高度。然而，图像要么适合列的宽度，而其下方是空的，要么甚至比整个表格大，如果你可以这样称呼它的话。

我尝试使用高度 100% 和对象适合：覆盖，但没有任何效果。

这是我的 HTML - 问题出在第一列：（忽略其他列）

<div class="hotel-box">
            <div class="row">
                <div class="col-4">
                    <img src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1" alt="">
                </div>
                <div class="col-5">
                    <h3>Hotel name</h3>
                    <p>some info</p>
                    <p>room info</p>
                    <p>extra info</p>
                </div>
                <div class="col-3">
                    <h4>word rating</h4>
                    <p>number reviews</p>
                    <span>number rating</span>
                    <span>BGN price</span>
                    <p>per night per person(под числото с дребен шрифт)</p>
                </div>
            </div>
        </div>

还有我的CSS：

/* HOTEL BOX */
.hotel-box{
    border: 1px solid gray;
    border-radius: 16px;
    width: 40%;
    margin: 50px 0;
}
.hotel-box img{
    height: 100%; 
    object-fit: cover;
}

Answer 1

试试这个：

.hotel-box img{
    width: 100%;
}