如何在导航栏中添加徽标

Question

您好，我正在尝试使用HTML和CSS将徽标添加到导航栏中，我设法将图像加载到导航栏中，但是如图所示，它的尺寸很大。

    <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 */
}

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