Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the nav class specifies a height of 50px. How can I make sure the logo fills the height of the nav bar without stretching beyond it?
https://i.stack.imgur.com/VhRbw.png
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;
}
If setting the image height and width to 100% makes it too large, https://i.stack.imgur.com/DSMX4.png
How can I enforce the size of the image to match the height of its parent div?