Когда я добавляю изображение в контейнер, я не могу сделать его отзывчивым

Question

У меня возникает дилемма с некоторым кодом в HTML и CSS, когда я добавляю простой заголовок с изображением и задаю свойства для image {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

Вот кодовая ссылка для справки: https://codepen.io/anon/pen/pmEgaM

вам просто нужно сохранить стиль заголовка как высоту: 100%; и продолжайте изменять высоту изображения в стиле заголовка-содержимого 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;
}