html - 导航栏高度适应 Img

Question

我目前正在学习html和css，但是遇到了导航栏高度适应图片的问题。我该如何改变呢？我已经尝试了很多，不幸的是没有成功：/

html {
    overflow-x: hidden;
    display: block;
}
body {
    font-family: Arial;
}

header {
    background: #424242;
    height: 200px;
}

.navbar-logo {
    width: 200px;
    height: auto;
}

.navbar-items {
    margin: 0px 10px 0px 0px;
    display: inline;
}

.navbar-items li{
    margin: 0px 10px 0px 0px;
    display: inline;
    padding: 20px 5px 20px 5px;
    list-style-type: none;
}


.navbar-items a {
    color: black;
}

<header>
    <!--Navbar-->
    <nav class="navbar-expand">
        <img src="assets/images/logo2.png" class="navbar-logo" alt="navbar logo"></a>
        <ul class="navbar-items">
            <li class="nav-item"><a href=".">Home</a></li>
            <li class="nav-item"><a href="">About me</a></li>
            <li class="nav-item"><a href="">Kontakt</a></li>
        </ul>
    </nav>
</header>

标签： htmlcss

Answer 1

图片是标签 NAV 的内嵌内容，所以 NAV 会一直调整以包含图片，您必须调整图片的高度。