我有一个网格布局，我希望将标题分为两个单元格：徽标和导航。徽标单元格应与其中的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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句