I'm facing an issue with some HTML & CSS code. When I try to add a simple header with an image and set the properties to image {height:100%; width: auto;}, it works fine. However, when the image is part of more complex code, it stops working. In the simpler code, if I change the height of the header, the image size changes accordingly. But in the second code snippet, if I change the height of the header, the image remains the same size. Could someone please explain why this is happening?
Below are two code snippets to illustrate my point.
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>