Изображения отображаются по-разному в Chrome / Firefox против Safari - PullRequest
Новая
       10

Изображения отображаются по-разному в Chrome / Firefox против Safari

0 голосов
/ 04 июня 2018

Я экспериментировал с CSS Grid и собрал компоновку, которая подходит для Chrome и Firefox, но когда я пробую это в Safari, изображения сжимаются, особенно когда размер экрана уменьшается.Я сделал кодовое перо этого здесь:

https://codepen.io/jwolfe890/full/NzxjMx/

(Обратите внимание, что в представлении редактора в codepen изображения Safari отображаются соответствующим образом, но они не отображаются надлежащим образом в браузере Safari.или в полноэкранном режиме)

Как вы можете видеть в Safari, изображения выглядят следующим образом:

enter image description here

В то время как в Chrome / Firefox другиебраузеры это выглядит так:

enter image description here

Я использую минимальную высоту и максимальную высоту в CSS, которые могут по-разному отображать изображения междубраузеры.Как я могу добиться последовательного рендеринга изображений в браузерах?

Файл CSS: 

body {
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 5px;
    max-width: 100%;
}

img {
    max-height: 100%;
    max-width: 100%;
}

h1 {
    text-align: center;
    font-size: 60px;
}

img:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    height: 100%;
}

img:nth-child(4) {
    grid-column: span 2;
}

1 Ответ

0 голосов
/ 04 июня 2018

Удаление высоты 100% для первого изображения улучшило выдаваемое, но все еще есть небольшое расхождение в том, что изображения теперь немного не заполняют сетку: 

img:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    height: 100%; <--- REMOVED THIS
}

Однако, это все ещеСмутил меня, почему высота 100% будет отображать изображения по-разному в разных браузерах.

...