如何在没有设置高度的情况下用图像完全填充 div答案

【问题标题】：How to completely fill a div without a set height with an image如何在没有设置高度的情况下用图像完全填充 div
【发布时间】：2026-01-15 04:10:01
【问题描述】：

我有这个 JSX

<div style={{ display: 'flex' }}>
  <div className='outer-div'>
    <div className='first-div'>
      a <br />
      b <br />c
    </div>
    <div className='second-div'>
      <img
        src='https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG'
        alt=''
      />
    </div>
  </div>
  <div className='outer-div'>
    <div className='first-div'>
      a <br />
      b <br />c
    </div>
    <div className='second-div'></div>
  </div>
</div>

还有这个 CSS

.outer-div {
  width: 300px;
  height: 500px;
  background-color: blue;
  display: flex;
  flex-direction: column;
}

.first-div {
  background-color: red;
}

.second-div {
  height: 100%;
  background-color: green;
}

.second-div > img {
  height: 100%;
  width: 100%;
}

我希望图像完全适合 div，但它是这样的：

我注意到如果屏幕更薄，问题就不会发生，就像这里：

我怎样才能使图像完全填充任何屏幕尺寸的second-div，而无需设置高度？

【问题讨论】：

标签： html css jsx

【解决方案1】：

您可以使图像相对于 div。

.second-div {
  position: relative;
  height: 100%;
  background-color: green;
}
.second-div > img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
}

【讨论】：

【解决方案2】：

找到解决方案：像这样将overflow: hidden; 添加到.second-div

.second-div {
  height: 100%;
  background-color: green;
  overflow: hidden;
}

它有效，但我不知道为什么。如果有人能解释一下，将不胜感激。

【讨论】：