CODEWITHSUNDEEP
htmlcssimagesvgflexbox
user16587839
user16587839

Reputation:

Make image fit flexbox container in CSS

In this codepen, I have written a flexbox navbar like so:

* {
  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 this nav has a height of 88px.
If I add an image as a flex child to the nav, it increases the total height of its parent (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>

How can I make the image (in this case, the Google logo) fit 100% of the available height while
a) maintaining its aspect ratio
b) not exceeding the height of the navbar (/increasing its height to compensate)

Thanks!

Upvotes: 4

Views: 176

Answers (1)

SIMBIOSIS surl
SIMBIOSIS surl

Reputation: 397

Just change this values:

#logo > img {
height: 97%;
width: auto;
object-fit: contain;
margin:4px;

I really don't know if it affects the height of the nav because I am editing in my phone but if it does affect it just decrease the nav height to fit the 92px that you want.

Upvotes: 1

Related Questions