html - 如何使我的 Logo 适合我的导航栏？

Question

我有一个大的透明标志，我把它放在了我下载的主题附带的旧标志的位置，但它没有根据导航栏缩放

我可以在 photoshop 中减小 Logo 的大小，但我觉得这不是解决此问题的最佳方法

这是我的标志代码

<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a></div>

我如何修复 Logo 以使其适合我的导航栏..

这是我的整个导航栏 html

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <!-- Logo -->
            <a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a>
        </div>

        <!-- Navmenu -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#home">Home.</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menus.</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="./breakfast.html">All Day Breakfast</a></li>
                        <li><a href="./lunch.html">Lunch</a></li>
                        <li><a href="./childrenmenu.html">Children's Menu</a></li>
                        <li><a href="./coffeeandcake.html">Coffee and Cakes</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#about">Location.</a>
                </li>

                <li>
                    <a href="#cater">Catering.</a>
                </li>
                <li>
                    <a href="#about">About.</a>
                </li>

                <li><a href="#contact">Contact.</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

一般来说，无论何时您要调整图像的拟合度，这就是您要寻找的四个 CSS 属性。

.img-responsive {
    height: auto;
    width: auto;
    max-height: 72px;
    max-width: 250px;
}

在我的代码片段中，我们告诉图像自动调整自己的大小。 <img>除非另有明确说明，否则标签将尝试保留纵横比。两个max-属性决定了我们想要的最大维度。例如，如果我们上传一张 300 像素宽和 72 像素高的图片，它最终会小于我们的最大高度和 250 像素宽。

要使图像垂直居中，您需要这样做:

line-height: 72px; /* whatever the fixed height of the bar is */
vertical-align: middle;

如果您的图像是导航栏的确切高度，请尝试使用 vertical-align: top如果那看起来不对。