拉伸图像的不同屏幕尺寸

Question

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

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

对不起，如果这之前已被问到/回答，但正如我所说我不是100％确定要搜索什么。

Answer 1

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

Answer 2

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

Answer 3

试试这个

background-size: 100% 100%; 

Answer 4

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

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