简体   繁体   中英

Resize bootstrap navbar brand logo keeping proportions

I was wondering if there's a way to dinamically resize the navbar brand logo image to have the exact height of the navbar itself and calculate the width keeping the image proportion.

<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>

I tried to edit the bootstrap .css adding:

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

or:

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

with no luck, the image remains with the same giant size.

The first one should do the trick, I want these settings to be applied inside the img tag inside the a tag with navbar-brand class, but, even if the css is refreshed correctly, these settings are not applied to my image.

In the CSS you provided, you may be referencing the wrong class name. You would need to override the .navbar-brand class, but you are referencing a .brand class name within .navbar . As such, the styles will not be applied to the element you are wanting it to.

Also, did you try using the class="img-responsive" on the image?

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

Otherwise, take a look at this Stackoverflow article, as it is similar: Bootstrap 3 Navbar with Logo .

Hope this helps your cause.

I dont know but this works with bootstrap css

@media(*here you indicate the screen size){ //here you indicate the image icon class or property then you can specify the image size you desire under the constriction of the size }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM