Css – Im trying to fill a column of a row with an image

Im trying to fill a column of a row, made using bootstrap, with an image. I want the image to be the same height as the row and the part of the image that doesnt fit the width to be cut off. However the image either fits the width of the column and below it is empty or is even bigger than the whole table, if you can call it that.

I tried with height 100% and object-fit:cover but nothing works.

This is my HTML – the problem is with the first column:(ignore the other columns)

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

And my 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;
}