图像在Chrome / Firefox与Safari中显示不同

时间:2018-06-04 00:38:14

标签: html css css3 cross-browser css-grid

我一直在尝试使用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中使用min-height和max-height,这可能会在浏览器之间呈现不同的图像。如何在浏览器中实现一致的图像呈现?

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 :(得分:0)

为第一张图片删除100%的高度可以改善已发布的图像,但是现在图片现在还没有填满网格轨迹,这仍然存在一些差异:

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

然而,令我感到困惑的是,为什么高度100%会在浏览器中呈现不同的图像。