Adding an image to a navbar using html and css - html

Question

I'm trying to make an image fit to the left side of a navbar using only pure html and css. So far, I haven't made the actual nav li links but here's what I have:
.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}
img {
width: 100%;
}
.nav_class {
height: 80px;
}
<header id="header">
<div class="container nav_class">
<img id="header-img" src="https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt="">
<nav id="nav-bar">
<ul>
<li class="nav-link"></li>
<li class="nav-link"></li>
<li class="nav-link"></li>
</ul>
</nav>
</div>
</header>
I wouldn't like it to be more than 80px in height. Just the image on the left and 3 nav one-word nav links on the right.
I understand how to create the nav links and get all of the container children to be side by side but I cant figure out how to get the image to be smaller and on a fixed position in the navbar.
Guess what I'm basically asking is how to get the image fit the container and how to even make a proper container for it.
Thank you!

Answer 1

If the container of the img is 80px, then setting the img to have height: 100% will give it 80px of height and it will automatically scaling it.
Then you can use flexbox to help you with the positioning. Something like this:
#nav-bar{
height: 80px;
display: flex;
justify-content: space-between;
}
#nav-bar img{
height: 100%;
}
.nav-links{
display: flex;
}
.nav-links li{
width: 100px;
}
<header id="header">
<nav id="nav-bar">
<img id="header-img" src="https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt="">
<ul class="nav-links">
<li>A</li>
<li>A</li>
<li>A</li>
</ul>
</nav>
</header>

Answer 2

You can use object-fit property for this. Just give a full height and width to your image and force the image to contain its parent.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
EDIT: You can learn more about this property on this page.
https://www.w3schools.com/css/css3_object-fit.asp

Answer 3

.container {
max-width: 1100px;
margin: 0 auto;
/* overflow: ; */
padding: 0 40px;
display:flex;
flex-direction: row;
justify-content: space-between ;
}
/* that will make image fit */
img {
width: 25%;
}
/* make the navbar and take every thing inside */
.nav_class {
height: 80px;
overflow: hidden;
}
#nav-bar ul{
margin: 0;
padding:0;
display:flex;
justify-content: space-between;
}

Answer 4

I added to your CSS code:
.container { display: grid; grid-template-columns: min-content auto; }
Those 2 lines change the header container to a grid where the logo will use up as much space as needed without changing the size format. The navbar will take up all remaining space.
Then I delted your CSS code for the image and replaced it with the header-img id to not influence other images:
#header-img { max-height: 80px; }
This will ensure that the logo will not use up more then 80px height and will take as much width as needed without changign the size ratio.
.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
display: grid;
grid-template-columns: min-content auto;
}
#header-img {
max-height:80px;
}
.nav_class {
height: 80px;
}
<header id="header">
<div class="container nav_class">
<img id="header-img" src="https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt="">
<nav id="nav-bar">
<ul>
<li class="nav-link"></li>
<li class="nav-link"></li>
<li class="nav-link"></li>
</ul>
</nav>
</div>
</header>