如何調整背景圖像以適應iPad屏幕

Question

我遇到了問題。當我在電腦和手機上查看我的網站時，它的構建非常完美;但是，當我在iPad上拉起它時，背景圖像就像炸燬了一樣。我的網站是http://www.zwdalpha.com/，任何幫助將非常感謝！此外，我的Github是https://github.com/zcsmouse970/zwdalpha

Answer 1

您的問題似乎是與background-attachment：fixed不符合預期的行爲。

嘗試background-attachment: scroll

Answer 2

爲了解決這個問題，首先需要明白髮生了什麼。背景圖像尺寸使用background-size屬性進行處理，您現在將其設置爲cover。 cover適用於大屏幕，因爲它確保圖像「覆蓋」了元素的高度。這允許在側面裁剪以確保它從上到下填充。 contain與此相反。它確保您可以隨時看到整個圖像。它通過確保寬度爲100％並將高度留給剪輯或展開來完成此操作。當你在平板電腦上看到圖像被「爆炸」時，CSS會確保整個內容區域充滿了圖像，並通過確保圖像的高度填充內容窗格來實現。這裏是我們更詳細的地方。

您的圖像設置爲fixed。很明顯，這是你想要的效果，但讓我們考慮一下這裏需要發生什麼。現在圖像需要從上到下覆蓋屏幕，因爲它可以在fixed的內容窗格的任何位置查看。所以現在你的圖像覆蓋了整個視口。當您將其更改爲background-attachment:scroll;時，您可以看到它所做的更改。它將圖像放入內容窗格而不是視口。

所有這一切，你可以改變這種方式是通過實現媒體查詢和背景切換到更適合觀看尺寸的裁剪版本。