不同屏幕尺寸和设备上背景图像的完美宽度答案

【问题标题】：perfect width of background images on different screen sizes and devices不同屏幕尺寸和设备上背景图像的完美宽度
【发布时间】：2018-02-19 10:57:49
【问题描述】：

我想知道如何像 Apple.com 一样在不同的屏幕尺寸和设备上完美匹配背景图像（参见示例）

红色圆圈（MBP 的边缘）在较小的设备上始终位于屏幕边缘，但在较大的屏幕上，显示的图像宽度更大。

图片为2560x882，MBP宽度为1045px。

我还注意到，在非常高分辨率的情况下，他们会将图像换成两倍大的图像。我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

对于您可以使用的图像

img { max-width: 100%; height: auto; }

对于您使用的背景图片：

div { background-size:cover; } /* background-size: "contain" | "100%/100%" | "100%" is also an option according to requirement. */

【讨论】：