如何使我的徽標適合我的導航欄？

Question

我有一個大的透明徽標，我把它放在我下載的主題附帶的舊徽標的位置，但它不會根據導航欄縮放

我可以減少photoshop中徽標的大小，但我覺得這不是解決這個問題的最佳方法

這是我對徽標的代碼

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

我如何修復徽標，使其適合我的導航欄..

這是我的整個導航欄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如果它看起來不對。