Как я могу уменьшить изображения в моей навигационной панели, когда экран становится меньше? - PullRequest
Новая
       10

Как я могу уменьшить изображения в моей навигационной панели, когда экран становится меньше?

0 голосов
/ 25 апреля 2020

Я хочу, чтобы изображения, включенные в мою панель навигации, автоматически изменяли размеры, чтобы изображения оставались рядом друг с другом, а не друг над другом, если это имеет смысл. в основном при тестировании того, как это будет выглядеть на телефоне, панель навигации занимает добрую треть экрана.

Это мой 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;
}

любая помощь будет принята с благодарностью. Я довольно хреновый при форматировании, ага.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Удалось исправить это, используя img-отзывчивый класс из bootstrap и удалив классы nav-brand. Затем поместите это в мою таблицу стилей 

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

, отредактируйте максимальную ширину, чтобы она стала больше или меньше, и если вы применяете идентификатор к изображениям, вы можете установить ширину для отдельных изображений

0 голосов
/ 25 апреля 2020

Вы можете добавить display: flex и align-items: baseline к вашему .navbar классу. CSS flexbox - отличный инструмент для различных макетов вместе с сеткой CSS. Вы можете узнать больше об этом здесь: Руководство по Flexbox . 

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

}

Надеюсь, это поможет! JSfiddle link

...