当我将图像添加到容器中时，我无法使其响应答案

【问题标题】：When i add image into container i can`t make it responsive当我将图像添加到容器中时，我无法使其响应
【发布时间】：2019-09-14 01:07:55
【问题描述】：

当我添加一个带有图像的简单标题并将属性设置为图像 {height:100%; width: auto;} 它可以工作，但是当我在更复杂的代码中使用图像时不再工作。在较小的代码中，如果我改变标题的高度，图像也会改变，但是在第二个代码中，如果我改变标题图像的高度，则保持相同的大小有人可以向我解释为什么会这样吗？

下面我有两个代码 sn-ps 看看我在说什么

header{
  height:80px;
  background:#eee;
}
.header-content{
  display:flex;
}
.header-content img{
  height:100%;
  width:auto;
}
.links-list{
  display:flex;
  margin-top:50px;
}
.links-list li{
  margin-right:4rem;
}

<!-- !Header -->
  <header class="header ">
    <div class="container">
      <div class="header-content">
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg" alt="">
        <div class="menu-links">
          <ul class="links-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Bio</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Academy</a></li>
            <li><a href="#">Gallery</a></li>
          </ul>
       
        </div>
      </div>
    </div>
  </header>

nav{
  background:#eee;
  height:80px;
}
nav img{
  height:100%;
  width:auto;
}

<nav>
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg" alt="">
</nav>

【问题讨论】：

你能解释一下你所说的“不再工作”是什么意思吗？
你已经设置了header高度为80px，所以你也可以设置图片高度为80px，只有在容器（header）高度发生变化时才需要使用%。
我编辑了帖子，并解释了我想说的更多内容
#Hassan Thamery 你能解释一下为什么如果在容器中不能给出 100% 的高度吗？

标签： html css image height

【解决方案1】：

这里是codepen链接供参考：https://codepen.io/anon/pen/pmEgaM

你只需要将标题的样式保持为 height: 100%;并在标题内容 img 样式中不断更改图像的高度，这将为您提供预期的结果

header{
  height: 100%;  # this will make sure your header height is 100% irrespective of image geight
  background:#eee;
}
.header-content img{
  height:100%;   #this height you can change 
  width:auto;
}

【讨论】：