如何使用 css 网格向导航栏添加徽标

Question

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

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;
    }

如何使用 css 网格向导航栏添加徽标

How do I add a logo to the navbar with css grid

html

css

css-grid