html - 如何将 Logo 添加到导航栏

Question

大家好 我正在尝试使用 HTML 和 CSS 将 Logo 添加到我的导航栏 我已经设法将图像加载到我的导航栏，但是它太大了，如图所示。

    <div class="nav">
    <div class="container">
        <ul class="pull-left">
            <img src="images/test.png">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">How to</a></li>
        </ul>
        <ul class="pull-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Log In</a></li>
            <li><a href="#">Help</a></li>
        </ul>

        <div class="clear"></div>
    </div>
</div>

Answer 1

好吧，有几种选择。首先是使用 Photoshop 等任何编辑器调整图像大小。其次是通过 css 设置图像的宽度和高度:

.pull-left img {
    display: block;
    width: 30px; /* here put your width */
    height: 30px; /* here put your height */
}

但是，如果您的 Logo 图像不会根据您的设计和媒体查询缩放到其初始大小，您应该采用第一种方法。它还会减小文件大小。