在Chrome浏览器中正确显示网页，而不是在Firefox中

Question

如图中所示，我的网页背景图片适合Chrome浏览器，但由于某些原因，即使窗口大小相同，图片在Firefox中也无法正确缩放。更糟糕的是，当我缩小窗口宽度时，它根本不能很好地缩放。我该如何知道某人正在使用的浏览器的窗口大小？

更新这里是图像。首先是铬，其次是火狐

https://www.flickr.com/photos/125343138@N07/24491082235/in/dateposted-public/

https://www.flickr.com/photos/125343138@N07/24464890356/in/dateposted-public/

这里是样式表

.nav { 

list-style-type: none; 
margin: 0; 
padding: 0; 
width: fill; 
overflow: hidden; 
background-color: #333; 
} 

.nav li { 

display: inline; 
padding: 20px 10px;  
} 

.nav li a { 

color: whitesmoke; 
padding: 14px 190px; 
font-family: 'futura'; 
font-size: 16px; 
position: relative; 
top: 5px; 

} 

.jmb { 

background-image: url('https://farm2.staticflickr.com /1600/24149223706_da584c8c45_o.jpg'); 
height: 100%; 
width: 100%; 
position:absolute; 
background-repeat: no-repeat; 
background-size:contain; 
background-position: 00px 37px; 
} 

.jmb h5 { 

    font-family: 'Yellowtailregular'; 
    font-size: 105px; 
    color: black; 
    margin-top: 170px; 
    margin-left: 190px; 
    -webkit-animation-delay: 1s; 
    -webkit-animation-duration: 4s; 

} 

.jmb div p 
{ 
font-size: 27px; 
font-family: 'futura'; 
margin-left: 110px; 
margin-top: -24px; 
word-wrap: break-word; 
width: 27%; 
-webkit-animation-delay: 2s; 
-webkit-animation-duration: 4s;  

} 

Answer 1

技术上你只有真正了解你的用户使用的是基于您的指标是什么浏览器大小以及你对人口统计的了解。我会从一些小的东西开始，随着你走到那个大型的桌面大小而放大。

AMACB对于webkit支持是正确的，因此您的一些代码可能需要moz前缀才能正常工作。你可以找到支持文档在这里：

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_support_chart

至于覆盖整个给定区域，我没有看到一个活链接，但我的第一个建议是尝试与此：

background-size: cover 

这应该拍摄图像并将其映射到其对象的大小，尽管您可能无法获得正确的宽高比。那时你可能会考虑使用媒体查询和/或不同的图像或不同的位置来改变它的显示方式。一定要检查你的标记，以确保没有一个对象位于页面的边界上，以防止图像到达最终位置。