我有一个CSS网格，如下所示：
grid-template-columns: auto 1fr;
grid-template-rows: 2% 8% 1fr auto auto 2%;
grid-template-areas:
"sg-header sg-header"
"logo title"
"nav-bar content"
"nav-bar description"
"nav-bar extra-info"
"sg-bottom sg-bottom";
当我填满网格区域时，所有内容都能完美地与文本配合使用。但是，我想将图像放置在第二行的第一个单元格中（“徽标”区域）。我想保持其长宽比，并将其高度调整为行高。为此，我正在使用以下内容：
width: auto;
height: 100%;
高度可以完美地调整到行高，并且也可以保持宽高比，但是自动列不会调整图像宽度。如果我将图像替换为文本，则列宽将调整为文本宽度，但是对于图像来说，这是行不通的。
更有趣的是，我刚刚注意到这仅发生在Chrome（67.0.3396.87）中。在Firefox中，情况甚至更糟，因为在Firefox（52.9.0）中，由于某种原因，即使图像缩小到行高并保持宽高比，第一列仍与缩放之前的图像一样宽，因此其显示宽度较低