Изображения сетки отображаются правильно в Firefox (версия для разработчиков), но не в Chrome или Safari

Question

Я пытаюсь создать простую фотогалерею с макетом c mosai, и он выглядит именно так, как я хочу, на Firefox, но когда я просматриваю его с помощью Chrome или Safari, все это непропорционально. Я осмотрелся SO и посмотрел несколько видео на CSS Grid, но не могу понять, почему он это делает. Я действительно замечаю, что когда я проверяю сетку в Chrome, если я убираю «height: 100%» в моем css, тогда кажется, что это работает лучше, но зазор тоже становится испорченным.

Any идея, что я делаю не так, что не работает? Я бы хотел, чтобы вид 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;

}

Firefox Скриншот Dev Edition

Answer 1

Chrome выглядит так, как я ожидал.

Поскольку вы заставляете height:100%, я ожидаю, что изображение будет принудительно помещено в сетку, которую вы не указали min-height для и определяется дробными единицами.

Mozilla не сохраняет соотношение сторон изображений и по умолчанию каким-то образом растягивает изображения, чтобы они соответствовали ближайшей линии сетки. Я не тестировал его в Mozilla.

Удалите все ссылки height:100% и добавьте это в свой CSS:

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