Question

我有纵向图像（宽度：869px；高度：2853px），我想用作网站的背景图像。图像应具有响应性，并始终占据浏览器窗口的整个宽度。图像应保持其比例，并且切勿裁切。因此，高度需要调整为给定的宽度。由于图像高度始终大于视口高度，因此您应该可以滚动到图像底部，该底部也应该是网站底部。

如果有人告诉我该怎么做，我将非常感激。

Answer 1

我认为其他评论者在不断建议使用background-size: cover时会忽略您的请求，而不是“裁剪”图片。

以下是我收集的您的要求：

要作为背景的图像，位于网站内容的后面。
背景图像具有特定的长宽比，因此不应裁剪
如果浏览器窗口与图像的宽高比不匹配，则应允许垂直滚动，但应始终适合窗口宽度。

仅CSS解决方案...

body {
  position: relative;
  margin: 0;
}
body::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 0;
  /* height / width = ratio% */
  /* 2853px / 869px = 328.3084% */
  padding-bottom: 328.3084%;
  padding-bottom: calc(2853 / 869 * 100%);
  background: url('//placekitten.com/869/2853') center top / 100% auto no-repeat;
}

用图片的url替换url，如果图片的像素尺寸发生变化，请按照我已注释掉padding-bottom的计算方式来更新这些像素。

这将在网站正文中创建一个单独的背景元素，并且仍然允许您在网站内部拥有所需的任何内容。但是请记住，如果您的屏幕很小，比如说320px / 480px，并且由于屏幕的宽度狭窄，网站内容变得非常高，则可以滚动浏览此背景图像以说明内容。这不会破坏此代码，但是我只建议向您的html元素添加背景颜色或纹理，在这种情况下，该颜色或纹理将显示在图像下方。祝你好运。

Answer 2

遵循本教程： https://www.w3schools.com/css/css_background.asp

这是通用的CSS代码。

body {
  background-image: url("image.png"); //or image.jpg
  background-repeat: no-repeat; // if you want to repeat the image if it doesn't fit the screen size Not needed if you have background-size: cover;
  background-position: right top; //center center is a common favourite
  background-attachment: fixed;
  background-size: cover; //to cover the whole size of the body
}

我建议您找到能在不同屏幕尺寸之间变化的图像。否则，图像将拉伸并变得非常模糊。

您还可以拍摄图像，并根据屏幕尺寸为该屏幕尺寸使用其他图像： https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

这里是通用代码：

@media only screen and (max-width: 600px) {
  body {
    background-image: url("different_image.png");
    background-repeat: no-repeat; //Not needed if you have background-size: cover;
    background-position: right top;
    background-attachment: fixed;
    background-size: cover;
  }
}

使背景图像适合浏览器宽度，并在必要时扩展高度

2 个答案: