我的移动响应网站未正确调整大小

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%;