我的手機響應網站沒有正確調整大小

Question

我有一個網站正處於開發階段。默認視圖看起來不錯，但是當瀏覽器重新調整大小時，圖片和字體看起來過於拉伸或擠壓，而不是很靈敏。我在這裏附上了兩張圖片。請指出什麼是錯的。謝謝。

Answer 1

如果圖像的背景下，努力增加：

background-size: cover; 

到這些div。

這將使圖像足夠大以填充其容器，同時保持原始比例。

如果圖像只是一個img而不是背景圖像，如果您切換它，它應該工作。

Answer 2

當您將此CSS添加到您的背景圖片時，它會在所有瀏覽器大小中使用100% width。添加此CSS後圖像不能拉伸。

background-position: center center; 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover; 
height: 100%; 
width: 100%;