Изменить размер загружаемого логотипа логотипа navbar

Question

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

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png"></a> 
    </div> 

Я попытался изменить загрузочный .css, добавив:

.navbar .brand > img { max-height: 40px; } 

или:

.navbar .brand { 
    max-height: 40px; 
    max-width: 30%; 
    overflow: visible; 
    padding-top: 0; 
    padding-bottom: 0; 
} 

не повезло, изображение остается таким же гигантским размером.

Первый должен сделать трюк, я хочу, чтобы эти параметры применялись внутри тега img внутри тега navbar-brand, но, даже если css обновлен правильно, эти настройки не применяются к моему изображению.

Answer 1

В предоставленном CSS вы можете ссылаться на неправильное имя класса. Вам необходимо переопределить класс .navbar-brand, но вы ссылаетесь на имя класса .brand в пределах .navbar. Таким образом, стили не будут применяться к тому элементу, который вы хотите.

Кроме того, вы пытались использовать class="img-responsive" на картинке?

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a> 

В противном случае, посмотрите на эту статью StackOverflow, так как он похож: Bootstrap 3 Navbar with Logo.

Надеюсь, это поможет вам.

Answer 2

я не знаю, но это работает с начальной загрузки CSS

@media (* здесь вы указываете размер экрана) { // здесь указать класс значок изображения или свойство , то вы можете указать размер изображения, которое вы желание под сужением размера }