網頁在Chrome中正確顯示，而不在Firefox中正確顯示

Question

如圖所示，我網頁的背景圖像適合鍍鉻，但由於某些原因，即使窗口大小相同，該圖像也無法在Firefox中正確縮放。 更糟糕的是，當我縮小窗口寬度時，它根本無法縮放。 我應該如何知道某人正在使用的瀏覽器的窗口大小？

這里的更新是圖像。 首先是鉻，第二是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/zh-CN/docs/Web/CSS/Mozilla_support_chart

至於覆蓋整個給定區域，我看不到實時鏈接，但是我的第一個建議是嘗試使用此鏈接：

background-size: cover

盡管您可能無法正確獲得寬高比，但應該可以拍攝圖像並將其映射到對象的大小。 那就是您可能考慮使用媒體查詢和/或不同的圖像或不同的位置來更改其顯示方式的時候。 請務必同時檢查標記，以確保頁面邊框上也沒有對象，以防止圖像到達末尾。