Adding logo to bootstrap 4 beta navbar - css

Question

I want to add my logo in the navbar in bootstrap 4 beta framework.
The height of the navbar should be the same or nearly the same like the normal height without a logo, like you can see in the first example.
Example without and with logo
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #CECFFF;">
<a class="navbar-brand" href="/"><img src="logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
....
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/gGpJLq
The solutions from another question here are only for bootstrap 4 alpha working.

Answer 1

You could specify the height of the image to ensure it doesn't increase the size of the navbar by adding a class to the img. Like this:
.logo {
max-height: 40px;
padding: 0;
}

Answer 2

<a class="navbar-brand" href="/">
<img src="https://www.lern-online.net/bilder/logo.png" style="height: 35px; padding: 0 auto;">
</a>
here as you can clearly see i gave an inline styling which you can manually modify further on what you need.
The problem here was that the image which you used was appearing in its defaulting size hence the navigation bar was modifying itself to accomodate it we can avoid this by ensuring the size of our image before-hand.
hope I helped.