html - 网格图像在 Firefox（开发版）中正确显示，但在 Chrome 或 Safari 中不正确

Question

我正在尝试使用马赛克布局制作一个简单的照片库，它在 Firefox 上看起来与我想要的完全一样，但是当我使用 Chrome 或 Safari 查看它时，一切都不成比例。我环顾四周，看了一些关于 CSS Grid 的视频，但我找不到它为什么会这样做。我确实注意到，当我在 Chrome 中检查网格时，如果我在我的 css 中删除“高度：100%”，那么它似乎工作得更好，但差距也会变得混乱。

知道我做错了什么使它不起作用吗？我希望 Chrome 视图显然与 Firefox 视图相同。我在下面也包含了每个浏览器的屏幕截图。

这是我的代码：

HTML:
  <div class="mosaic-main">
    <img
      src="GoogleDriveFiles/PhotographyPage/Photo01-320wX240h.JPG"
      alt="clouds at sunset"
      class="col-1-pic pic-1"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo02-320wX427h.JPG"
      alt="orange tabby cat"
      class="col-2-pic pic-2"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo03-320wX240h.jpg"
      alt="tree lit up with blue lights"
      class="col-3-pic pic-3"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo04-320wX240h.jpg"
      alt="darker orange clouds at sunset"
      class="col-1-pic pic-4"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo05-320wX240h.jpg"
      alt="ambulance driving by with light trails from time lapse"
      class="col-3-pic pic-5"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo06-320wX240h.jpg"
      alt="black and white gate framing tree without leaves"
      class="col-1-pic pic-6"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo07-320wX427h.JPG"
      alt="clouds against blue sky"
      class="col-2-pic pic-7"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo08-320wX240h.jpg"
      alt="storm clouds"
      class="col-3-pic pic-8"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo09-320wX240H.png"
      alt="black and white pic of orange tabby sleeping on carpet"
      class="col-1-pic pic-9"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo10-320wX427h.JPG"
      alt="three pink flowers"
      class="col-2-pic pic-10"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo11-320wX240h.png"
      alt="black and white cat sleeping on a bed"
      class="col-3-pic pic-11"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo12-320wX240h.png"
      alt="black and white cat sitting on carpet"
      class="col-1-pic pic-12"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo13-320wX240h.png"
      alt="looking out at raindrops on car window"
      class="col-3-pic pic-13"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo14-320wX240h.png"
      alt="black and white cat laying on carpet looking at camera"
      class="col-1-pic pic-14"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo15-320wX427h.jpg"
      alt="black and white cat sitting at glass door"
      class="col-2-pic pic-15"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo16-320wX240h.png"
      alt="single pink flower against green bush"
      class="col-3-pic pic-16"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo17-320wX240h.jpg"
      alt="backstage with orange light shining at the end of a dark hallway"
      class="col-1-pic pic-17"
    />

    <img
      src="GoogleDriveFiles/PhotographyPage/Photo18-320wX240h.jpg"
      alt="foggy sunrise looking at city buildings in background"
      class="col-3-pic pic-18"
    />
  </div>

CSS:

.mosaic-main {
  display: grid;
  width: 80%;
  height: auto;
  margin-top: 4rem;
  margin-bottom: 8rem;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(22, 1fr);
}

img {
  border-radius: 5px;
}

.col-1-pic {
  grid-column: 1 / 2;
  width: 100%;
  height: 100%;
}

.col-2-pic {
  grid-column: 2 / 3;
  width: 100%;
  height: 100%;
}

.col-3-pic {
  grid-column: 3 / 4;
  width: 100%;
  height: 100%;
}

.pic-1 {
  grid-row: 1 / 4;
}

.pic-2 {
  grid-row: 1 / 6;
}

.pic-3 {
  grid-row: 1 / 4;
}

.pic-4 {
  grid-row: 4 / 7;
}

.pic-5 {
  grid-row: 4 / 7;
}

.pic-6 {
  grid-row: 7 / 10;
}

.pic-7 {
  grid-row: 6 / 11;
}

.pic-8 {
  grid-row: 7 / 10;
}

.pic-9 {
  grid-row: 10 / 13;
}

.pic-10 {
  grid-row: 11 / 16;
}

.pic-11 {
  grid-row: 10 / 13;
}

.pic-12 {
  grid-row: 13 / 16;
}

.pic-13 {
  grid-row: 13 / 16;
}

.pic-14 {
  grid-row: 16 / 19;
}

.pic-15 {
  grid-row: 16 / 22;
}

.pic-16 {
  grid-row: 16 / 19;
}

.pic-17 {
  grid-row: 19 / 22;
}

.pic-18 {
  grid-row: 19 / 22;

}

标签： htmlcsscss-grid

Answer 1

Chrome 看起来和我期望的一样。

因为你在强迫height:100%我希望图像将自己强制到网格，你没有指定一个min-heightfor 并由分数单位定义。

Mozilla 不保留图像的纵横比，并默认拉伸图像以匹配最近的网格线。我没有在 Mozilla 中测试它。

删除所有height:100%引用并将其添加到您的 CSS：

.mosaic-main > img{
  align-self: stretch;
}