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><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>

1 Answers

0
krsna On Best Solutions

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;
}