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

Question

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

下面我有两个代码片段，看看我在说什么

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>

Answer 1

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

您只需要将页眉的样式保持为 height: 100%;并在 header-content 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;
}

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

When i add image into container i can`t make it responsive

html

css

height

image