How to make the size of the container drive the size of an image

HTML-CSS
1

I’m trying to create a header in which there is supposed to be an image logo:

HTML

<body>
    <header id="header">
        <img src="logo.jpg" alt="Company logo" id="header-img">
    <nav id="nav-bar">
        <a href="" id="nav-link"></a>
        <a href="" id="nav-link"></a>
        <a href="" id="nav-link"></a>
    </nav>
</header>

CSS

body {
    background-color: rgb(162, 205, 207);
    width: 100%;
    height: 100%;
    margin: 0%;
}

header {
    background-color: rgb(197, 9, 9);
    width: 100%;
    height: 10%;
}


img {
    object-fit: contain;
    width: 10%;
    height: 10%;

}

I want to be able to change the header height to e.g. 20% and have the image resize to fit the new height while keeping its aspect ratio. Right now no matter how I change the the height of the header it doesn’t affect anything but If I change the size of an image it adjusts the size of its container.
I want to be able to drive the size of an image with the size of its container, not the other way around but I don’t know how to do it.
logo

Also, how do I get rid of that thin red stripe of the header sneaking under the logo?

2

You can make the header have a position set to fixed to fix that problem and then change the size of the header to anything you require.


After doing the above suggestion, you can set the image to 100%(the size of the container), so the image will take the entire height of the header

3

Thank you, It seems to work.