拉伸图像以适应不同的屏幕尺寸

Question

我不太确定要搜索我的答案。基本上我有一个设计，标题可以看here。

文档的宽度为1200.我可以获得更大的版本，宽度可达2560，但我应该如何使用图像呢？我应该使用CSS媒体查询并为特定屏幕尺寸使用不同的图像吗？注意：这不是移动网站设计;我只需要在所有电脑屏幕上运行。

如果之前有人问过/回答我很抱歉，但正如我所说，我不是100％肯定会搜索什么。

Answer 1

您可以使用％来定义高度和宽度，并使用一个图像。但我认为你应该使用不同尺寸的不同图像，因为它是移动的，如果你可以避免让用户加载不必要的数据，那就去做吧。

Answer 2

如果是前景图像，则只使用百分比宽度。如果是背景图片，您可以使用background-size属性。

Answer 3

试试这个

 background-size: 100% 100%;

Answer 4

看看这个script。它基本上标识了屏幕大小，然后加载适当的css，您可以使用与屏幕匹配的图像。

以％为单位更改背景大小不是一个好选择（尽管最简单），因为浏览器无论如何都会加载完整图像（最大），然后重新缩放以匹配大小。如果使用大图像，这可能会降低页面加载性能。