Cannot fit image to navigation bar - html

Question

I'm trying to add an image to my navigation bar, and fit the image to the navigation bar, however I could not manage to resize the image for this purpose; no matter what I did the image just extends to the whole page. I am quite new to HTML & CSS, could you please explain how to fit the image to the navigation bar?
#profile-image {
height: auto;
width: auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>

Answer 1

try with this
#profile-image{
height:auto;
width:auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img{
object-fit:cover;
}
nav{
overflow:hidden;
}
I just added the rule for nav and the cover for th eimage

Answer 2

How large do you want this image to be on the navbar? Let's say you want it to be 100px by 100px.
First you need to set the height and width of the parent element of the image. I just gave the div with id profile-image a height: 100px and width: 100px.
Next you need to tell the <img /> tag to conform to these dimensions. We can do that by giving it a style of height: 100% and width: 100%.
#profile-image {
height: 100px;
width: 100px;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img {
height: 100%;
width: 100%;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>

Answer 3

I'm not sure what you're trying to achieve so this is something of a guess:
nav {
display: flex;
align-items: center;
background: #eeeeee;
}
#profile-image {
flex-basis: 20%;
font-size: 0;
}
#profile-image img {
width: 100%;
}
ul.menu {
display: flex;
margin: 0;
justify-content: space-around;
flex-grow: 1;
list-style-type:none;
padding:0;
}
ul.menu li {
padding:10px;
}
<nav>
<div id="profile-image"><img src="http://placekitten.com/150/150" /></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>

Answer 4

If you want to "fit the image to the navbar" then you need to give the nav bar a size for the image to fit into.
You can probably get rid of the profile-image div if you wish, unless you want to add special styles to the image area.
I am assuming that you want the image to be like an icon on the left (because you added the float: left style), as opposed to an image that covers the entire nav bar like a background image would.
If that's the case:
nav {
height: 150px; or whatever you want the image and the nav bar to be
}
#profile-image {
height: 100% or you can use the same height as the nav style
width: auto; That will keep the image proportions correct
float: left;
padding-left: 2%;
margin: 0 auto; <== not sure what you are doing here. Try deleting it as it won't help.
padding: 10px 0;
}