拉伸圖像的不同屏幕尺寸

Question

我不太確定搜索我的答案。基本上我有一個設計，頭可以看到here。

該文檔的寬度爲1200.我可以獲得寬度高達2560的較大版本，但應該如何使用該圖像？我是否應該使用CSS媒體查詢並針對特定的屏幕大小使用不同的圖像？注意：這不是一個移動網站設計;我只需要在所有電腦屏幕上運行。

對不起，如果這之前已被問到/回答，但正如我所說我不是100％確定要搜索什麼。

Answer 1

您可以用％定義高度和寬度，並使用一個圖像。但我認爲你應該爲不同的尺寸使用不同的圖像，因爲它是移動的，並且如果你可以避免給用戶加載不必要的數據，那就去做吧。

Answer 2

如果是前景圖片，則只需使用百分比寬度即可。如果它是背景圖片，則可以使用background-size屬性。

Answer 3

試試這個

background-size: 100% 100%; 

Answer 4

看看這個script。它基本上標識屏幕大小，然後加載適當的CSS，您可以使用與屏幕匹配的圖像。

以％爲單位更改背景大小並不是一個好的選擇（儘管如此），因爲瀏覽器無論如何都會加載完整圖像（最大），然後重新調整大小以匹配大小。如果您使用大圖像，這可能會降低您的頁面加載性能。