My logo in nav isn't responsive, using flexbox-CodePudding

I'm trying to create a flex header with nav. However, my image doesn't seem to be responsive. As I'm minimizing the width the menu seems to act responsive but my logo image doesn't.

The image is a dummy one, when i set an image with these certain width and height (without adding any dimensions in property i have the same issue)

How can i solve this?

body {
    margin: 0;
    margin: 0;
    width: 100%;
    display: flex;
  }

header {
    width: 100%;
    height: 91px;
    background-color: #222222;
    position: relative;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    line-height: 17.22px;
}

ul {
    list-style: none;
}

nav {
    display: flex;
    justify-content: space-between;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 280px;
}

li {
    margin-left: 35px;
}

 nav img {
    display: flex;
    margin-left: 254px;
    position: relative;
}

<body>
    <header>
        <nav>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
        
            <ul>
                <li style="margin-left:0;"><a href="#">Hompage</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>

CodePudding user response：

Preserve aspect ratio:

img {
  height: 91px;
  width: auto;
}

CodePudding user response：

please check the code you need to add height: 91px; object-fit: contain; in logo image and set max-width for responsive you need to add media query I have mention in code so you can check it.

body {
    margin: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction:column;
  }

header {
    width: 100%;
    padding: 10px 0;
    background-color: #d2d2d2;
    position: relative;
}

a {
    text-decoration: none;
    color: #000;
    font-size: 15px;
}

ul {
    list-style: none;
  padding:0;
  margin:0;
}

nav {
    display: flex;
    justify-content: space-between;
  padding:0 5%;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    margin-right: 35px;
}
li:last-child {
    margin-right:0px;
}

nav img {
    display: flex;
    position: relative;
    height: 91px;
    object-fit: contain;
    width: 100%;
    max-width: 100px;
}

@media screen and (max-width:575px){
  nav{flex-direction:column;}
  nav ul {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
}
}

<body>
    <header>
        <nav>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
        
            <ul>
                <li style="margin-left:0;"><a href="#">Hompage</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>

CodePudding user response：

Try to add margin in 'rem' or in 'em' whenever you need responsiveness.

CSS:

nav img{
        position: relative;
        margin-left: 4rem;
       }