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

Question

I have a dilemma with some code in HTML & CSS, when I add a simple header with an image and I set properties to image {height:100%;
width: auto;} it works, but when I have the image in more complex code isn`t working anymore.
In the smaller code if i change height of header the images change as well,but on second code if i change height of header image stays on same size
Can someone please explain to me why that happens?
Down here i have two code snippets to see what I`m saying
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>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</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

Here is the codepen link for reference: https://codepen.io/anon/pen/pmEgaM
you just need to keep the styling for header as height: 100%; and keep changing height of image in the header-content img styling this will give you expected result
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;
}