響應的背景正在擠壓肖像移動

Question

我有一個使用響應背景的問題。 http://poppykeith.co.uk/index.html在計算機瀏覽器和移動瀏覽器的橫向上看起來是正確的，但是當在縱向上使用移動設備（即時通訊使用iOS）進行查看時，圖像會被擠壓以適合屏幕。

我該如何才能讓圖像放大到縱向模式而不是拉伸？

感謝

Answer 1

您編寫的代碼幾乎可行，但min-width:1024px和width:100%規則彼此衝突並導致您看到的壓扁效果。基本上，width勝過min-width。

你想用真正的技術是設置圖像作爲主體元素的背景，然後用background-size:cover，使瀏覽器進行適當加載

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

詳情：http://css-tricks.com/perfect-full-page-background-image/

Answer 2

看看這篇文章：http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk

它談論移動Safari如何喜歡縮減大型圖像。