限制 div 的大小以避免溢出，当它包含一个 img答案

【问题标题】：Constraining a div's size to avoid overflow, when it contains an img限制 div 的大小以避免溢出，当它包含一个 img
【发布时间】：2021-09-23 17:05:59
【问题描述】：

我正在努力限制网格布局中行的高度。我正在限制这个最高级别的包装 div 的高度，并且希望没有溢出。该网格包含：

一个包装 div，包含
- img 元素
- 固定高度较小的 div
应该采用最大内容高度的 div

<div style='border: 1px solid black; height: 170px; width: 200px; display: grid; grid-auto-flow: row; grid-template-rows: auto max-content'>
  <div style='border: 1px solid blue; width: 100%'>
    <div style='border: 1px solid green; width: 100%'>
      <img style='border: 1px solid pink; height: 100%; width: 100%' src='https://img.rasset.ie/00124791-1200.jpg' />
    </div>
    <div style='border: 1px solid purple; height: 25px; width: 180px'>
    </div>
  </div>
  <div style='border: 1px solid red; height: 100px; width: 190px' />
</div>

<div style="height: 5rem"></div>

<div style='border: 1px solid black; height: 170px; width: 200px; display: grid; grid-auto-flow: row'>
  <div style='border: 1px solid blue; width: 150px'>
    <div style='border: 1px solid green; width: 160px'>
      <img style='border: 1px solid pink; height: 20px; width: 170px; object-fit: cover' src='https://img.rasset.ie/00124791-1200.jpg' />
    </div>
    <div style='border: 1px solid purple; height: 25px; width: 180px'>
    </div>
  </div>
  <div style='border: 1px solid red; height: 100px; width: 190px' />
</div>

目前，图像根据其宽度和图像的纵横比将其父 div 推到所需的高度。如果空间不足，我想裁剪图像。我可以对高度进行硬编码，这会限制 img 元素，但这意味着网格（最高级别的包装器）不会填充到其整个高度。

如何让img 元素灵活调整大小？

【问题讨论】：

注意：<img> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。

标签： css frontend css-grid

【解决方案1】：

主要概念是了解如何将图像放置在 div 元素中，如果图像是子元素并且您指定了该 div 元素/包装器的固定宽度，那么通过放置一个图像将适合该 div图像元素的宽度为 100% 而不是 170px，因为 div/wrapper 已经是 170px，否则溢出仍然存在。

【讨论】：

我不明白这实际上意味着什么 - 我不能指定一个固定的高度，但也不能有一个固定的宽度？在某些时候，某些父容器会有一些宽度限制

【解决方案2】：

想出一个解决方案，解决 img 元素在 divs 内部处理的奇怪方式，将图像设置为带有图像背景的 div。

您可以在下面的代码中看到图像区域根据其他部分的大小（30px 灰色和 50px 红色）灵活调整大小以占用其余空间

<style>
  .imgDiv {
    background-image: url(https://img.rasset.ie/00128cd0-300.jpg);
    height: 100%;
    background-position: center;
    background-size: cover
  }

  .flexBox {
    display: flex;
    flex-direction: column;
  }
</style>

<div class='flexBox' style='border: 1px solid black; height: 170px; width: 200px;'>
  <div class='flexBox' style='background: blue; flex-grow: 1; display: flex'>
    <div class='imgDiv'>
    </div>
    <div style='background: grey; height: 30px'></div>
  </div>
  <div style='background: red; height: 50px;'></div>
</div>

【讨论】：