Resize logo in navbar header

Question

I have a logo inside a navbar-header like this:

      <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <span><a class="navbar-brand toplogo" href="#"><img src="img/beta.png"/></a></span>
                </div>
                <div>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Login</a></li>
                        <li><a href="#">Sign up!</a></li>
                        <li><a href="#">Home</a></li>
                    </ul>
                </div>
            <div>
        </nav

My CSS is here:

.toplogo {

    height : 30%;
    width : 30%;
    margin-top: 5px;
}

I tried many different combinations in .toplogo, but the image size never changes. I tried cascading .navbar-brand .toplogo , but that didn't work either. Does anyone know how I can resize the logo in the header? Thanks in advance!

Answer 1

将.toplogo放在<img>标记中

<img class="toplogo" src="img/beta.png"/>

Answer 2

For the image to resize like you want it, you have to target .toplogo img and not just toplogo .

Your CSS should look like this:

.toplogo {
    margin-top: 5px;
}

.toplogo img {
    height : 30%;
    width : 30%;
}

Working fiddle .

Answer 3

You have two ways to do it

1. Either change in css file

.toplogo img {
    height : 30%;
    width : 30%;
    margin-top: 5px;
} 

2. Or put class with img tag

<img class="toplogo" src="img/beta.png"/>