Firefox中的CSS网格单元格宽度大于其内容

Question

我有一个div，高度为：15vw，我想在这个div中放置4个图像(每个图像大小是1920*1080px(，如果我使用下面的代码，chrome中的一切都可以，但在Firefox中，每个图像大小都是195*110(可以(，但每个网格单元宽度是1920px！我希望每个单元格的宽度等于图像的宽度。

https://codepen.io/arsenal2323/pen/yLNPoXV

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: green;
height: 15vw;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-flow: column;
grid-auto-columns: min-content;
gap: 10px;
}
.image {
height: 100%;
}

<div class="container">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_f0297eacbfb4266f311a8cb4137e4ef8b7cdd00b.jpg?t=1582550242" alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_bd875dbf865e70cda73a7cd6b132cadacfdb768b.jpg?t=1582550242" alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_7ef17676a804b0d646c38583ba0f68f33b3f3d9e.jpg?t=1582550242" alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_23815433fdd4a63064da79222fdefb569eeafaba.jpg?t=1582550242" alt="" class="image">
</div>

铬：chrome 预览

Firefox：在Firefox 中预览

Answer 1

将容器标记的显示属性更改为"table"并将显示"table cell"属性添加到img标记对我有效。here

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: green;
width:100%;
height: 15vw;
display: table;
}
.image {
width:25%;
display:table-cell;
padding:10px;
float:left;
}

<div class="container">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_f0297eacbfb4266f311a8cb4137e4ef8b7cdd00b.jpg?t=1582550242"
alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_bd875dbf865e70cda73a7cd6b132cadacfdb768b.jpg?t=1582550242"
alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_7ef17676a804b0d646c38583ba0f68f33b3f3d9e.jpg?t=1582550242"
alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_23815433fdd4a63064da79222fdefb569eeafaba.jpg?t=1582550242"
alt="" class="image">
</div>