img不符合网格行高

Question

我似乎无法使img符合网格行的max-height （45px）。

我还想知道是否有更简洁的方法让img符合列表元素的 height 而不设置行高

谢谢！

＆＃13;

＆＃13;

.menu ul {
  display: grid;
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 45px;
}

.menu a {
  background: #74d3ae;
  display: block;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
}

.menu img {
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

＆＃13;

<header>
  <nav class="menu">
    <ul id="menu-list">
      <li>
        <a href=""><img class="logopic" src="https://source.unsplash.com/random" alt="logo"></a>
      </li>
      <li>
        <a href="">Beers</a>
      </li>
      <li>
        <a href="">Wines</a>
      </li>
      <li>
        <a href="">Desserts</a>
      </li>
      <li>
        <a href="">Reservations</a>
      </li>
    </ul>
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以省略祖父母 li：

＆＃13;

＆＃13;

.menu ul {
  display: grid;
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 45px;
}

.menu a {
  background: #74d3ae;
  display: block; /* necessary */
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
}

.menu img {
  width: 100%; /* optional */
  height: 100%; /* necessary */
}

＆＃13;

<header>
  <nav class="menu">
    <ul id="menu-list">
      <a href=""><img class="logopic" src="https://source.unsplash.com/random" alt="logo"></a>
      <li>
        <a href="">Beers</a>
      </li>
      <li>
        <a href="">Wines</a>
      </li>
      <li>
        <a href="">Desserts</a>
      </li>
      <li>
        <a href="">Reservations</a>
      </li>
    </ul>
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;