Check out this codepen where I have created a flexbox navbar as shown below:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f9fafb;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
nav {
background-color: #fff;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
box-shadow: 0px 0px 10px 10px #ddd;
}
#items {
display: flex;
flex: 1 0 auto;
justify-content: space-evenly;
list-style-type: none;
padding: 32px;
}
#items>li {
display: flex;
justify-content: center;
align-items: center;
}<nav>
<ul id='items'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>Note that the height of this navigation bar is set to 88px.
When an image is added as a child element within the nav, it increases the overall height of the parent container (the navbar) by 4px (new height: 92px).
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f9fafb;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
nav {
background-color: #fff;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
box-shadow: 0px 0px 10px 10px #ddd;
}
#logo {
display: flex;
flex: none;
justify-content: center;
}
#logo>img {
height: 100%;
width: auto;
object-fit: contain;
}
#items {
display: flex;
flex: 1 0 auto;
justify-content: space-evenly;
list-style-type: none;
padding: 32px;
}
#items>li {
display: flex;
justify-content: center;
align-items: center;
}<nav>
<div id="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="Example logo" />
</div>
<ul id='items'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>Is there a way to make sure the image (in this case, the Google logo) fits 100% of the available height while
a) preserving its aspect ratio
b) without increasing the height of the navbar to compensate?
Thank you!