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网格向导航栏添加徽标

1 个答案: