我有一个网格布局，我希望标题分为两个单元格：徽标和导航。徽标单元格的宽度应与其中的 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 宽度？
您正在维度演算中设置一个循环。图像设置为 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>希望我理解你的问题
.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>