Question

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

我有一个容器，里面是一个图像。我想要的是基于HEIGHT而不是WIDTH的图像尺寸增加。我觉得这很简单：

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

这不起作用。

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

我希望它在使用宽度时表现为响应式图像：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>

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

1 个答案: