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

Question

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

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

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

这是供引用的codepen链接: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;
}