如何让图像适应大小以匹配其容器的高度

Question

我正在尝试在 CSS 中执行此操作，并认为它很简单，我以前从未真正需要执行此操作，但现在我尝试了它，但无法让它工作。

我有一个容器，里面有一个图像。 我想要的是根据高度而不是宽度增加尺寸的图像。我认为这会像这样简单：

#project-header {
   height: 50%;
}
#project-header img {
display: block;
height: 100%;
width: auto;
margin: auto;
}

这不起作用。

我的容器是浏览器窗口的 50% 高度，所以这一切都很好，但图像以原始大小显示。

我希望它在使用 width: 100%, height: auto; 时表现得像响应式图像。但我的图像始终是其原始大小（因此流出容器）并且不适应其容器的高度。

我错过了什么吗？或者这是不可能的？有没有办法做到这一点？

Answer 1

要让你的 div 采用height: 50%，你首先需要将height:100% 提供给所有父 div 一直到 html 标记

html, body{
height:100%;
}

然后你的 css 将按预期工作

    #project-header{
            height:50%;
    }
    #project-header img{
            max-height: 100%;
            width: auto;
    }

html, body{
  height:100%;
  /* width: 95%; */
}

#project-header{
  height:50%;
  width: 500px;
}
#project-header img{
  max-height: 100%;
  width: auto;
}

.second-image{
  height:50%;
  /* width: 500px; */
}
.second-image img {
    max-width: 100vw;
    height:auto;
    width:auto;
    max-height:100vh;
}

Method 1
    <div id="project-header">
      <img src="http://via.placeholder.com/350x150" alt="">
    </div>
    
    
    Method 2
    <div class="second-image">
      <img src="http://via.placeholder.com/350x150" alt="">
    </div>