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

Question

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.

The problem is with the first column (ignore the other columns).

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}

.hotel-box img {
  height: 100%;
  object-fit: cover;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


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

Answer 1

The simplest way to accomplish this is by making the image the background of the column as in the example below. Use some custom CSS to size and position the image, and you can dynamically inline the background-image property for each element in your HTML.

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}

.hotel-box .image-col {
  background-position-x: center;
  background-size: cover;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


<!-- Body -->
<div class="hotel-box">
  <div class="row">
    <div class="col-4 image-col" style='background-image: url("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>