弹性容器内的响应式图像高度答案

【问题标题】：Responsive image height inside a flex container弹性容器内的响应式图像高度
【发布时间】：2020-09-04 07:11:25
【问题描述】：

我有一个标准的 Bootstrap 网格和一个 .col 内的图像，其高度应等于右侧文本块的高度：

.img-fluid-height {
  max-height: 100%;
  width: auto;
}

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


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

我希望图像是.col 容器的高度，该高度等于右侧文本块的高度。但是，它不是这样工作的。

【问题讨论】：

你的预期是正确的，但由于图像很大，它是定义高度的那个，并且文本的高度与它相同

标签： html twitter-bootstrap css flexbox

【解决方案1】：

使用position:absolute从流中删除图像，您的文本将定义高度，然后您可以在图像上使用height:100%：

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


<div class="container-fluid">
  <div class="row">
    <div class="col-4">
    
      <img class="mh-100 mw-100 position-absolute" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

【讨论】：

想避免绝对定位，但这似乎是唯一的解决方案。
@sdvnksv 可能还有另一种解决方案 ;) .. 对我来说，您可以使用绝对图像或使用背景图像

【解决方案2】：

我在假设别的东西。你可以用background-size做这样的事情。

.background-image {
  height: 100%;
  background-image: url("https://placehold.it/1920x1280");
  background-size: cover;
}

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


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <div class="background-image"></div>
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

【讨论】：

不，这会水平挤压图像。
@sdvnksv 我希望图像偏斜是可以的（来自 OP 的期望）。否则，您需要将该图像设置为某物的背景。然后你可以使用background cover。
不，不行。我添加了overflow: hidden; 来隐藏过大的宽度。

【解决方案3】：

添加了width:100%希望这会有所帮助。谢谢

.img-fluid-height {
  max-height: 100%;
  width: 100%;
}

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


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

【讨论】：