html - 如何使用 css 网格将 Logo 添加到导航栏

Question

每当屏幕尺寸增加时，行高就会发生变化，并且 Logo 会超过导航栏的高度。我被困在这里，真的需要一些帮助

HTML

<div class="container">
<div class="navbar">
  <div class="logo-desktop">
    <img src="E:\work\JensonWebsite\images\jenson-logo-desktop.svg" />
  </div>
</div>
<div class="slider"></div>
<div class="gallery"></div>
<div class="brands"></div>
<div class="contact"></div>
<div class="footer"></div>
</div>

CSS

.container {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(12, 1fr);
}

.navbar {
display: grid;
padding: 6px;
background-color: #0E1848;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px;
align-items: center;
justify-content: center;
}

Answer 1

如果你想让图像根据行改变高度，那么添加这样的CSS:

    img {
        width: 80%;
        height: 100%;
    }

但是如果你想要固定的图像，那么使用固定的高度和宽度，比如:

    img {
        width: 200px;
        height: 60px;
    }