html - 如何在网格模板行中保持图像的纵横比？

Question

我有一个 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) 中，由于某种原因，第一列与重新缩放之前的图像一样宽，即使图像缩小到行高并保持纵横比，因此它的显示宽度较低.

标签： htmlcssgoogle-chromefirefoxcss-grid