Question

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

    <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">

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

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

Answer 1

将background-size设置为100% 100%以拉伸并且不保留宽高比。

将background-size设置为cover以进行拉伸，裁剪冗余部分并保留纵横比。

将background-size设置为contain以进行拉伸，在需要的位置添加额外空间并保留纵横比。

Answer 2

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

<body id="bg-img">