我一直在尝试使用CSS Grid并在Chrome和Firefox中放置一个好的布局,但是当我在Safari中尝试时,图像会被挤压,特别是当屏幕尺寸缩小时。我在这里制作了一个代码笔:
https://codepen.io/jwolfe890/full/NzxjMx/
(注意,在codepen的编辑器视图中,Safari图像会正确渲染,但它们无法在Safari浏览器或全屏视图中正确呈现)
正如您在Safari中看到的,图像看起来像:
在Chrome / Firefox其他浏览器中,它看起来像:
我在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;
}
答案 0 :(得分:0)
为第一张图片删除100%的高度可以改善已发布的图像,但是现在图片现在还没有填满网格轨迹,这仍然存在一些差异:
img:nth-child(1) {
grid-column: span 2;
grid-row: span 2;
height: 100%; <--- REMOVED THIS
}
然而,令我感到困惑的是,为什么高度100%会在浏览器中呈现不同的图像。