Question

左列中的图像需要根据相邻列中内容的高度进行响应。

在此屏幕快照中：图像占用太多垂直空间。

仅在图像上使用img-fluid类是行不通的，因为这没有将图像拉伸到所需的高度。

background-size: cover;是我通常需要的，但是然后我需要设置一个固定高度，这与响应相反。

那么，如何使图像（或背景图像）具有响应性，同时使其与相邻列中内容的高度匹配？

当前代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
        <div class="col-6 px-0">
            <img class="img-fluid" src="https://via.placeholder.com/3000x2000" alt="">
            </div>
        <div class="col-6">
            Some text...<br>
            more<br>
            text<br>
            and<br>
            stuff<br>
            for<br>
            more<br>
            height
        </div>
    </div>
</div>

Answer 1

您可以使用绝对定位的内部div包含图像。由于该行是flexbox，因此这是将左侧col缩小到右侧col中文本高度的唯一方法。

<div class="container-fluid px-0">
    <div class="row">
        <!-- img-fluid normal up to 'md' width -->
        <div class="col d-md-none">
           <img class="img-fluid" src="https://via.placeholder.com/3000x2000" alt="">
        </div>
        <!-- from 'md' width onwards convert to flex column 
        + add an absolute positioned inner div to contain the image -->
        <div class="col-md-6 px-0 d-none d-md-flex flex-column justify-content-center o-hidden">
            <div class="position-absolute o-hidden">
                <img class="mh-100 mw-100 d-block" src="https://via.placeholder.com/3000x2000" alt="">
            </div>
        </div>
        <div class="col-md-6">
            Some text...
            <br> more
            <br> text
            <br> and
            <br> stuff
            <br> for
            <br> more
            <br> height
        </div>
    </div>
</div>

.o-hidden {
    overflow:hidden; 
}

https://www.codeply.com/go/4fyb94J3OX

Answer 2

您可以像这样通过js在其他列中基于文本高度设置图像高度

$(document).ready(function() {
  var colTwoHeight = $('#colTwoInner').height();
  $('#colOneImg').css('cssText', 'height:'+colTwoHeight+'px !important;');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
        <div id="colOne" class="col-6 px-0">
            <img id="colOneImg" class="" src="https://via.placeholder.com/3000x2000" alt="">
            </div>
        <div id="colTwo" class="col-6">
          <div id="colTwoInner">
              Some text...<br>
              more<br>
              text<br>
              and<br>
              stuff<br>
              for<br>
              more<br>
              height
          </div>
        </div>
    </div>
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>

引导列中的响应（背景）图像，以匹配相邻列中内容的高度

2 个答案: