网格图像在Firefox (dev版本)中正确显示，但在Chrome或Safari中不显示

Question

我试图做一个简单的图片库的马赛克布局，它看上去与我希望它在火狐，但当我看到它与Chrome或Safari，这是不成比例的。我环顾四周，在CSS上看了一些视频，但我找不到它为什么会这么做。我确实注意到，当我在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;

}

​

​

​

​

Answer 1

Chrome看上去和我期望的一样。。

因为您强迫height:100%，所以我希望图像强制自己进入网格，而不是为网格指定一个min-height，并且由分数单位来定义。

Mozilla并没有保留图像的高宽比，并且默认地拉伸图像以匹配最接近的网格线。我没有用Mozilla测试过。

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

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