如何在导航栏中添加徽标

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

但是，如果根据您的设计和媒体查询，您的徽标图片不会缩放到初始尺寸，那么您应采取第一种方法。它也会减小文件大小。