引导左列最大高度到右列高度

Question

我正在使用Bootstrap和搜索CSS/SCSS解决方案来解决以下问题。我在一行中有两列。左列包含一个图像，右列包含一个复杂的网格结构本身。右栏的高度取决于它的内容，我希望左边的图像适合右栏的高度。

​

​

下面是一个简单的代码示例：

​

.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;  
}

​

我添加了！重要的，因为我假设它是Bootstrap，有时它会覆盖CSS值，如果没有它们，可以随意删除它们。