div 中的图像溢出

Question

我的图像从 div 框溢出。我制作了一个高度 160 的导航栏，并在其中添加了两个图像。我声明了一个框和 Flexbox，并添加了 justify-content:space- Between 。每当我尝试将两个图像放入 div 框中时，它都会从我的导航栏溢出，并且不尊重给定的高度。

我无法理解这个问题，因为我从 div 中删除了两个图像，但它没有溢出并保留在导航栏的高度。有人可以告诉我为什么会发生这种情况以及解决方案是什么？ 代码在这里：

*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}
.nav-bar{
    height:160px;
    width:100%;
    border:1px red solid;
    position:fixed;
    justify-content:space-between;
}
.header-img{
    border:1px blue solid;
}

<div class="container">
   <div class="nav-bar flex">
      <div class="header-img">
         <img src="https://picsum.photos/20/20.jpg">
      </div>
      <div class="header-list">
         <ul class="flex">
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </div>
      <div class="search">
         <input type="text" placeholder="Search here">
         <input type="button" value="submit">
      </div>
      <div class="header-img">
         <img src="https://picsum.photos/20/20.jpg">
      </div>
   </div>
</div>

Answer 1

图像不尊重容器高度：您的图像具有来自“https://picsum.photos/20/20.jpg”的固定尺寸，大概是 20x20 像素。如果它们溢出，可能是由于此处未显示的其他样式影响了它们的大小或布局。 您可以通过设置符合容器尺寸的最大高度或宽度来控制图像的大小，以便它们不会溢出。对于 .header-img img 选择器，您可以添加： .header-img img { 最大高度：100%； 高度：自动； // 保持纵横比 宽度：自动； // 调整宽度以保持纵横比 }

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center; // This will vertically align items in the middle of the navbar
    height: 160px;
    width: 100%;
    border: 1px solid red;
    position: fixed;
    top: 0;
    left: 0;
}

.header-img img {
    max-height: 100%;
    height: auto;
    width: auto;
}