響應式設計 - 位置固定和全屏圖像

我對客戶的響應式設計有一點問題。我有一個固定位置的背景div包含一個img。在縱向可視化中的智能手機上，我將img的高度設置爲100%，將寬度設置爲至auto。通過這種方式，圖像覆蓋窗戶的整個高度，不會扭曲寬度。響應式設計 - 位置固定和全屏圖像

問題是，在ios智能手機和網絡上工作（我嘗試過像ipadpeek.com和Riplle for chrome等仿真器），但在我的銀河3上，圖像仍然覆蓋窗口的整個高度，但它扭曲它horizontaly：

HTML：

<div id="bg_container"> 
    <img src="images/home-1.jpg" /> 
</div>

CSS：

@media only screen and (min-width : 321px) and (max-width : 360px) { 
    #bg_container { 
     position:fixed; 
     width:100%; 
     height:100%; 
     z-index:0; 
     overflow:hidden; 
    } 
    #bg_container img { 
     height:100%; 
     width:auto; 
     position:relative; 
    } 
}

Link test page

來源

2013-11-26 GGKMNTN

你不應該信任像ipadpeek.com這樣的網站來告訴你真正的ipad會渲染你的網站。他們所做的只是在ipad屏幕的大小顯示您的網站。它仍然使用您正在使用的任何瀏覽器的呈現引擎來實際呈現網頁。 – Turnip

我知道，但問題是在一個物理galaxy3，我已經測試了iPhone 4和3以及ipad3和2 ...在寬度的ios：自動運行正確，不扭曲圖像，在galaxy no ... – GGKMNTN

我發現了一個可以解決問題的jquery，但我認爲這不是正確的方法......我認爲可以有一個純粹的Css方式： – GGKMNTN