第一次使用 CSS 网格并在浏览器上遇到右侧间隙问题

Question

我是 html 和 CSS 新手，想为自己制作一个小网站来展示我的照片。

我有点努力让网格正确，特别是当改变浏览器窗口的纵横比时。

我现在陷入困境，因为在我的 VSC 上安装的实时预览中，它工作得很好，因为我希望它能工作，但不能在 Firefox 和 chrome 上工作。

我正在尝试使用网格来显示我的图片，并使它们覆盖整个页面，同时不改变宽高比。但是当我在 firefox 或 chrome 上打开 .html 时，右侧有一个巨大的空白。

VSC 浏览器中的配置

在 Firefox 或 Chrome 中的配置

---

这是我的 html 和 css 代码：

html：

<div class="container">
  <div>
    <img class = "photo" src="Japon_content/000001_minia.jpeg">
  </div>
  <div>
    <img class = "photo" src="Japon_content/000002_minia.jpg">
  </div>
</div>

CSS：

.container{
  display               : grid;
  grid-template-columns : 1fr 1fr;
  grid-template-rows    : 350px 350px;
  gap                   : 2em;
  padding               : 1em;
  }
.photo{
  max-width  : 100%; 
  max-width  : 100%; 
  object-fit : cover;
  } 

我试过了：

• 设置

  margin: 0;

  在体内
• 在 html 和 body 中设置

  height, width, max-width

• 设置

  width: 100%;

  在容器中

但它没有任何作用。

有可能解决这个问题吗？

Answer 1

不，间隙是正确的...

.container {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  grid-template-rows    : 350px 350px;
  gap                   : 2em;
  padding               : 1em;
  }
.container div {
  background-color : yellow;
  }  
.photo{
  max-width  : 100%; 
  max-width  : 100%; 
  object-fit : cover;
  } 

<div class="container">
  <div>
    <img class="photo" src="https://picsum.photos/350/350?random=1">
  </div>
  <div>
    <img class="photo" src="https://picsum.photos/350/350?random=2">
  </div>
</div>