我正在尝试仅使用纯HTML和CSS使图像适合导航栏的左侧。到目前为止，我还没有进行实际的导航链接，但这是我所拥有的：
.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}
img {
width: 100%;
}
.nav_class {
height: 80px;
}<header id="header">
<div class="container nav_class">
<img id="header-img" src="https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt="">
<nav id="nav-bar">
<ul>
<li class="nav-link"></li>
<li class="nav-link"></li>
<li class="nav-link"></li>
</ul>
</nav>
</div>
</header>我不希望它的高度超过80像素。仅左侧的图像和右侧的3个导航单个单词导航链接。我了解如何创建导航链接并使所有容器子项并排放置，但我不知道如何使图像变小并在导航栏中固定位置。
猜猜我基本上要问的是如何使图像适合容器，以及如何为容器制作合适的容器。谢谢！
如果img的容器为80px，则将img设置为haveheight: 100%会使其具有80px的高度，并会自动缩放它。然后，您可以使用flexbox帮助您进行定位。像这样：
#nav-bar{
height: 80px;
display: flex;
justify-content: space-between;
}
#nav-bar img{
height: 100%;
}
.nav-links{
display: flex;
}
.nav-links li{
width: 100px;
}<header id="header">
<nav id="nav-bar">
<img id="header-img" src="https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt="">
<ul class="nav-links">
<li>A</li>
<li>A</li>
<li>A</li>
</ul>
</nav>
</header>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句