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

【问题标题】：CSS grid cell width in Firefox is greater than its contentFirefox 中的 CSS 网格单元格宽度大于其内容
【发布时间】：2020-06-19 20:21:46
【问题描述】：

我有一个高度为 15vw 的 div；，我想在这个 div 中放置 4 个图像（每个图像大小为 1920*1080 像素），如果我使用下面的代码，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>

铬： preview in chrome

火狐： preview in Firefox

【问题讨论】：

在ie和firefox等浏览器中，当你使用%表示宽度时，图像容器的大小等于主图像的宽度。您可以使用 px、em、rem 来设置绝对大小。（不要使用 % 并使用 px）。

标签： css firefox css-grid

【解决方案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>

【讨论】：

如果我有“n”张图片（1
添加任何可以使用的图像，但每行显示 4 列图像