html - 在 CSS 中使图像适合 flexbox 容器

Question

在此 codepen ，我写了一个 flexbox 导航栏，如下所示:

* {
  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>

请注意，此导航的高度为 88px .
如果我将图像作为 flex 子级添加到导航，它会将其父级(导航栏)的总高度增加 4px(新高度: 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>

如何使图像(在本例中为 Google 徽标)适合 100% 的可用高度，同时
a) 保持其纵横比
b) 不超过导航栏的高度(/增加其高度以进行补偿)
谢谢!

Answer 1

只需更改此值:

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

我真的不知道它是否会影响导航的高度，因为我正在我的手机中进行编辑，但如果它确实影响它，只需降低导航高度以适应您想要的 92 像素。