Question

我有一个网格布局，我希望标题分为两个单元格：徽标和导航。徽标单元格应与其中的img元素具有相同的宽度，但img元素与行具有相同的高度，并按比例调整大小。

.grid {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: 100px;
  grid-template-areas: "logo nav";
}

.logo {
  grid-area: logo;
  background-color: goldenrod;
}

.logo > img {
  width: auto;
  height: 100%;
}

.nav {
  grid-area: nav;
  background-color: cornflowerblue;
}

<div class="grid">
  <div class="logo">
    <img src="http://placehold.it/200x200" alt="">
  </div>
  <div class="nav">
    test
  </div>
</div>

只要徽标高度为100px，一切都按预期工作。但如果它的大小不同，则徽标单元格的宽度与原始图像宽度一样大，而不是调整大小的图像。

我该怎么做才能完全适合调整大小的img宽度？

Answer 1

您正在维度演算中设置循环。图像设置为100％高度，因此它取决于网格尺寸。一旦设置好，网格就需要适应图像宽度....一般来说CSS样式不能很好地处理这种循环。

通过直接将图像高度设置为100px来中断循环：

.grid {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: 100px;
  grid-template-areas: "logo nav";
}

.logo {
  grid-area: logo;
  background-color: goldenrod;
}

.logo > img {
  width: auto;
  height: 100px;
}

.nav {
  grid-area: nav;
  background-color: cornflowerblue;
}

<div class="grid">
  <div class="logo">
    <img src="http://placehold.it/200x200" alt="">
  </div>
  <div class="nav">
    test
  </div>
</div>

Answer 2

希望我明白你的问题

.grid {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: 100px;
  grid-template-areas: "logo nav";
}

.logo {
  grid-area: logo;
  background-color: goldenrod;
}

.nav {
  display: flex;
  background-color: cornflowerblue;
  align-items: center;
}

.nav ul li {
  margin: 0px;
  padding: 0px 20px;
  display: inline-block;
  list-style: none;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div class="grid">
    <div class="logo">
      <img src="https://dummyimage.com/100x100/000/fff" />
    </div>
    <div class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

CSS适合网格单元按比例调整img

2 个答案: