背景图像大于视口答案

【问题标题】：Background image bigger than viewport背景图像大于视口
【发布时间】：2017-07-30 15:39:50
【问题描述】：

假设我有智能手机访问我的网站

    <meta name="viewport" content="width=360, initial-scale=1.0, user-scalable=no" />

还有一张像 1000x1000 这样的大背景图片。

我只希望能够修复我的背景图片的大小，即使它比视口大，以允许缩放之类的东西。

<body style="background: black url('pic.jpg') no-repeat; ">

在原始尺寸下工作正常，但是

<body style="background: black url('pic.jpg') no-repeat; background-size:750px">

将我的图片大小限制为视口宽度。

所以我的问题是：如果背景图像大小大于视口宽度，如何将其设置为任意值？

【问题讨论】：

【解决方案1】：

将background-size 设置为100% 100% 以拉伸且不保留纵横比。

将background-size 设置为cover 以拉伸、裁剪多余部分并保持纵横比。

将background-size 设置为contain 以拉伸、在需要的地方添加额外空间并保持纵横比。

【讨论】：

【解决方案2】：

#bg-img {
  width: 100%;
  height: 100vh;
  background-image: url(img/yourphoto.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

&lt;body id="bg-img"&gt;

【讨论】：