博客内容涉及到一个CSS布局在Firefox浏览器中显示不正确的问题。在Chrome中，图像能够按比例缩小适应屏幕宽度，但在Firefox中，图像并未按比例缩放。作者尝试使用`@-moz-document url-prefix()`来解决，但问题仍未解决。寻求解决方案集中在Firefox的CSS渲染差异上。
这是Firefox中的错误吗？
CSS,
html, body {
height: 100%;
margin: 0;
padding: 0 0;
/*border: 4px solid black;*/
}
.container-fluid {
height: 100%;
width: 100%;
display: table;
padding-right: 0;
padding-left: 0;
/*border: 4px solid blue;*/
}
.row-fluid {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
background-color:#990000;
/*border: 4px solid red;*/
}
.img-container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
.img-container img{
max-width:100%;
max-height:100%;
margin-left: auto;
margin-right: auto;
}
HTML,
铬,
大图像将按比例缩小以适合我想要的屏幕宽度.
Firefox,
图像未按比例缩小以适合屏幕.
有什么想法我可以解决这个问题吗？
编辑：
@-moz-document url-prefix() {
.img-container img {
width: 100%;
max-width: -moz-max-content;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
