在 css 网格布局中调整图像大小时的兼容性问题

Question

这是我的页面布局，图像应该垂直适合第一行：

<div id="main">
  <div id="header" class="vcenter">
  <img src="https://source.unsplash.com/random/200x200" id="logo">
  </div>
  <div id="e1"></div>
</div>

css:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #001018;
}

#main {
    display: grid;
    grid-template-columns: 200px;
    grid-template-rows: 100px auto;
    grid-template-areas:
        "header" 
        "e1";
    gap: 20px;
}

#header { grid-area: header; }

#e1 { grid-area: e1; }

#main > div {
    background-color: #334455;
    padding: 5px;
}

#logo {
    max-width: auto;
    max-height: 80%;
    border: 1px solid red;
}

.vcenter {
    display: grid;
    align-items: center;
}

Firefox 在调整大小后成功将图像居中，但 Chrome 将图像向下移动，如下所示：

是否有一种简单的方法可以在两个浏览器中兼容，只需对 css/html 进行最小的更改，同时保持当前的网格布局？

谢谢！

https://jsfiddle.net/tfoller/pnmjvq58/32/

Answer 1

高度不够。将height: 100% 添加到#logo。像这样：

#logo {
    ...
    height: 100%;
}

这在两种浏览器中都可以使用。