當屏幕變小時，如何讓導航欄中的圖像縮小

Question

我希望導航欄中包含的圖像自動調整大小，以便圖像彼此相鄰而不是彼此重疊，如果這有意義的話。 基本上，在測試它在手機上的外觀時，導航欄占據了屏幕的三分之一。

這是我的 HTML

<body>
    <nav class="navbar">    
        <a id="logoHolder" class="navbar-brand">
            <img id="navbarIMG" src="/assets/navbar_logo.png">
        </a>
        <a id="cogfeedHolder" class="navbar-brand">
            <img id="cogfeedIMG" src="/assets/cogfeed_logo.png">
        </a>
        <a id="accountHolder" class="navbar-brand">
            <img id="accountIMG" src="assets/account_icon.png">
        </a>       
    </nav>
</body>

這是我的 css

.navbar {
    background-image: linear-gradient(darkblue, blue, darkblue);
}

body {
    background-color: lightblue;
}

#navbarIMG {
    display: inline-block;
    width: 100%;
    height: auto;
}

#cogfeedIMG {
    display: inline-block;
    width: 100%;
    height: auto;
}

#accountIMG {
    display: inline-block;
    width: 80%;
    height: auto;
}

#logoHolder {
    display: inline-block;
    max-width: 342.4px;
    max-height: 102.29px;
}

#cogfeedHolder {
    display: inline-block;
    max-width: 339.2px;
    max-height: 74.35;
}

#accountHolder {
    display: inline-block;
    max-width: 136px;
    max-height: 118px;
}

任何幫助將不勝感激我在格式化東西方面很垃圾啊哈。

Answer 1

您可以將display: flex和align-items: baseline添加到您的.navbar class 中。 CSS flexbox 與 CSS 網格一起是用於各種布局的絕佳工具。 您可以在此處了解更多信息： Flexbox 指南。

.navbar {
background-image: linear-gradient(darkblue, blue, darkblue);
display: flex;
align-items: baseline;

}

希望有幫助！ JSfiddle 鏈接

Answer 2

設法使用來自引導程序的 img 響應 class 修復它並刪除 nav-brand 類。 然后把它放在我的樣式表中

.img-responsive {
    max-width: 30%;
    height: auto;
    display: block;
}

編輯最大寬度以使其更大或更小，如果將 id 應用於圖像，則可以設置單個圖像的寬度

當屏幕變小時，如何讓導航欄中的圖像縮小

問題描述

2 個解決方案

解決方案1
0 2020-04-25 14:38:53

解決方案2
0 已采納 2020-04-26 15:15:48

當屏幕變小時，如何讓導航欄中的圖像縮小

問題描述

2 個解決方案

解決方案1 0 2020-04-25 14:38:53

解決方案2 0 已采納 2020-04-26 15:15:48

解決方案1
0 2020-04-25 14:38:53

解決方案2
0 已采納 2020-04-26 15:15:48