Я создал lo go в формате .png, и текущие размеры составляют 200x200PNG (32-битный цвет), я использую теги anchor / img html для встраивания этого lo go в мой раздел панели навигации моя веб-страница. Проблема, если я добавлю css высоты: 3rem; lo go выглядит очень маленьким в верхнем левом углу. Если я удаляю все стили и у меня есть тег anchor / img в моем div, который содержит мой bootstrap nav, lo go выглядит как приличный размер, но тогда моя navbar принимает высоту моего lo go, вызывая мой Навбар, чтобы развернуть страницу намного больше, чем я хочу. Как сделать так, чтобы мой lo go отображался как читаемый / различимый размер при сохранении моей навигационной панели на нормальной высоте?
CSS и HTML, относящихся к nav
.navbar{
text-transform: uppercase;
font-weight: 300;
font-size: 0.8rem;
letter-spacing: 0.09rem;
background: rgba(35, 36, 44, 0.6) !important;
font-family: 'Pacifico', cursive;
}
.navbar-brand img{
height: 3rem;
}
.navbar-nav li{
padding-right: .7rem;
}
.navbar-dark .navbar-nav .nav-link{
color: #fff;
padding-top: 0.8rem;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover{
color: #edadbf;
}
<!--HTML-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a href="#" class="navbar-brand"><img id="diy3" src="img/diy3.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="navitem">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="navitem">
<a href="#about" class="nav-link">About</a>
</li>
<li class="navitem">
<a href="#projects" class="nav-link">Projects</a>
</li>
<li class="navitem">
<a href="#clients" class="nav-link">Clients</a>
</li>
<li class="navitem">
<a href="#contact" class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!--End Navbar-->