I want to have the logo as the home button, i have the image as a link on the nav bar, but its very tiny, i want it to fill the height of the nav bar. In css i gave the height as 50 px to the nav class. Is there a way to make any items placed in a container to not be bigger than the boundaries of the container ?

import Link from "next/link"; import navStyles from "../styles/Nav.module.css"; import Image from "next/image";

const Nav = () => {   return (
    <nav className={navStyles.nav}>
      <ul>
        <li>
          <Link href="/">
            <a className={navStyles.a}>
              <Image
                className={navStyles.logo}
                width="40.3px"
                height="21.3px"
                src="/blue.png"
              />
            </a>
          </Link>
        </li>
      </ul>
    </nav>   ); }; export default Nav;


.nav {
    height: 50px;
    padding: 10px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  .nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
  }
  
  .nav ul li a {
    margin: 5px 15px;
    max-height: 50px;
  }
  .logo{
    height: 50px;
    width: 50px;
    position: relative;
  }

When I set the image height and width to 100%, the image is bigger than the nav bar,

How do I restrict the image to the height of its parent div ?

CodePudding user response：

Add display: block and max-height: 100% to the image element:

.logo{
    height: 50px;
    width: 50px;
    max-height: 100%;
    display: block;
    position: relative;
  }

CodePudding user response：

wrap Image tag with div and make width and height 100% !important