背景圖像在某些瀏覽器上不能正確流暢

Question

我正在嘗試使我的#header背景圖像變得流暢，因此它在任何移動設備上看起來都不錯。我正在使用這個模擬器來測試我的網站http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://toarumajutsunoindex.me/背景圖片在chrome中沒有顯示正確的寬高比，但是在firefox中它工作正常。我真的不知道在真正的iphone上它看起來不錯。任何人都可以幫我修復背景嗎？

background-image: url(images/header.jpg); 
background-repeat:no-repeat; 
background-position:top; 
background-size: 100%; 
-webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
width: 100%; 

Answer 1

在背景圖像（或任何圖像）上使用百分比會導致它縮放以適應屏幕，改變縱橫比。如果您不希望發生這種情況，但希望它適合屏幕並保持相同的尺寸，請使用以下代碼，否則用100％更換「封面」。這應該工作在鉻和也與-ms-過濾器它也應該在IE中工作。

background: url(images/header.jpg) no-repeat top; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg',  sizingMethod='scale'); 
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg', sizingMethod='scale');