Div无法调整网格中包含图像的大小

Question

我对CSS和html有问题。 我用网格设计我的网站。 问题出在左上角。

网格为2x2，高一的高度调整为最大内容， 左上方的一个宽度也将调整为最大内容。 其余的调整为1fr。

现在，我得到了一个“包装” div，它的左上角包含一个图像（徽标）。

问题是，如果我用缓存重新加载页面或重定向到该页面，则图像不会显示。 如果我用Shift + F5重新加载它，图像就会显示出来！

代码如下：

<div class="main">
    <div class="menu">
        <div class="image">
            <img id="logo" src="images/logo.png">
        </div>
        <div class="submenu">
            <li>
                <a href="index.php?title=main"><h1>Startseite</h1></a>
            </li>
            <li>
                <a href="index.php?title=exam&do=main"><h1>Prüfung</h1></a>
            </li>
            <li>
                <a href="index.php?title=result"><h1>Ergebnisse</h1></a>
            </li>
            <li>
                <a href="index.php?title=admin"><h1>Verwaltung</h1></a>
            </li>
            <li>
                <a href="index.php?title=login&logout=1"><h1>Logout</h1></a>
            </li>
        </div>
    </div>
    <div class="content">
        <div class="data">
            *Should not care (works fine, extra grid is placed here too)*
        </div>
        <div class="personal">
            *Should not care (works fine)*
        </div>
    </div>
</div>

CSS如下：

.main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  width: 100%;
  height: 100%;
}

.menu {
    background-color: rgba(0,0,0,0.4);
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-area: 1 / 1 / 2 / 2;
}

.image{
    height: 100%;
    width: 100%;
}

.image #logo{
    max-width: 100%;
    max-height: 100%;
}

.submenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    min-width: 85%;
    grid-area: 1 / 2 / 2 / 3;
}

.submenu li{
    margin-left: 3%;
    margin-right: 3%;
    float: left;
}

.submenu a{
    font-family: "Franklin Gothic Medium";
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    color: white;
    text-decoration: none;
    float: left;
}

.content {
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-area: 2 / 1 / 3 / 2;
}

.data {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-area: 1 / 1 / 2 / 2;
}

.personal {
    background-color: rgba(0,0,0,0.2);
    grid-area: 1 / 2 / 2 / 3;
    padding-left: 5%;
    padding-right: 5%;
}

我认为'image'div不能正确调整其内容'logo'的大小，但是无法修复它，有人有什么想法吗？

问候