Question

当我添加带有图像的简单标头并将属性设置为图像{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

您只需要将标题的样式保留为高度：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;
}

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

1 个答案: