Bootstrap максимальная высота левого столбца до высоты правого столбца

Question

Я использую Bootstrap и ищу решение CSS / S CSS для следующей проблемы. У меня 2 столбца внутри ряда. Левый столбец содержит изображение, а правый - саму сложную сеточную структуру. Высота правого столбца зависит от его содержимого, и я хочу, чтобы левое изображение соответствовало высоте правого столбца.

Вот простой пример кода:

.fill-height {
  /* should have same height as right column */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="row">
    <div class="col-4">
      <img class="fill-height img-fluid" src="https://picsum.photos/200/300">
    </div>
    
    <div class="col-8">
      
      <!-- ... other rows and columns... 
      to simplify, just a text here
      -->
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      </p>
      
    </div>
  </div>

</div>

Без дополнительных CSS высота столбцов кабины определяется его самым большим столбцом. Я попытался использовать max-height: 100%, но это не сработало, потому что я не могу установить фиксированную высоту родительской (строки), потому что высота строки должна определяться высотой правого столбца.

Я также пробовал использовать display: table и display: table-cell, возможно, я сделал что-то не так, но это разрушило мой полный макет правой колонки

Все найденные мной решения не решают мою проблему или не решают ее должным образом.

Answer 1

Вы можете попытаться достичь этого с помощью небольшого количества JS.

По сути, идея состоит в том, чтобы получить высоту из содержимого с правой стороны, а затем изменить размер изображения.

let elSize = document.getElementById("myContent").offsetHeight;
document.getElementsByClassName("img-fluid")[0].style.height = elSize+"px";

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="row">
    <div class="col-4">
      <img class="fill-height img-fluid" src="https://picsum.photos/200/300">
    </div>
    
    <div class="col-8">
      <div id="myContent">
            <!-- ... other rows and columns... 
      to simplify, just a text here
      -->
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      </p>
      </div>

      
    </div>
  </div>

</div>

Answer 2

Это должно работать:

.col-4 {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.col-4 img {
    width: 100% !important;  
}

Я добавил! Important, потому что предполагаю, что это Bootstrap, а иногда он переопределяет CSS значения, не стесняйтесь удалять их, если он работает без них.