How do I make the size of the Image to be the same as the Navigation Buttons?-CodePudding

I have designed a navigation bar, which also needs to have a logo, the problem is that the image is bigger than the navigation buttons. Which is also visible when hovering over the items like in the image shown below.

How do I resolve this issue?

.navigation ul {
  margin: 0;
}

.navigation li {
  display: inline;
}

.navigation img {
  max-width: 4ch;
}

.navigation a {
  display: inline-block;
  padding: .8em;
  color: white;
  text-decoration: none;
}

.main-navigation {
  text-align: left;
}

.navigation a:hover {
  background-color: rgba(255, 255, 255, 0.301);
  color: black;
}

.nav-header {
  background-color: rgba(0, 0, 0, .4);
  background-image: url("Images/navbg.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  padding-bottom: 30px;
}

<header >
  <nav >
    <ul>
      <li>
        <a href="index.html" target="_self"><img src="https://via.placeholder.com/60" ></a>
        <</li>
          <li><a href="index.html" target="_self">HOME</a></li>
          <li><a href="applications.html" target="_self">APPLICATIONS</a></li>
          <li><a href="about.html" target="_self">ABOUT</a></li>
    </ul>
  </nav>
</header>

CodePudding user response：

The usual solution these days is flex layout with center alignment of the child elements. Also take the padding off the logo anchor element or size it as needed.

See https://css-tricks.com/snippets/css/a-guide-to-flexbox.

.navigation ul {
  display: flex;
  align-items: center;
  margin: 0;
}

.navigation li {
  display: inline;
}

.navigation img {
  max-width: 4ch;
}

.navigation a {
  display: inline-block;
  padding: .8em;
  color: white;
  text-decoration: none;
}

.main-navigation {
  text-align: left;
}

.navigation a:hover {
  background-color: rgba(255, 255, 255, 0.301);
  color: black;
}

.nav-header {
  background-color: rgba(0, 0, 0, .4);
  background-image: url("Images/navbg.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  padding-bottom: 30px;
}

<header >
  <nav >
    <ul>
      <li >
        <a href="index.html"  target="_self"><img src="https://via.placeholder.com/40" ></a>
      </li>
      <li><a href="index.html" target="_self">HOME</a></li>
      <li><a href="applications.html" target="_self">APPLICATIONS</a></li>
      <li><a href="about.html" target="_self">ABOUT</a></li>
    </ul>
  </nav>
</header>