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

Question

我有肖像图片（宽度：869 像素；高度：2853 像素），我想将其用作我网站的背景图片。图片应该是响应式的，并且总是填满浏览器的整个宽度 window。图像应保持其比例，切勿裁剪。因此高度需要调整到给定的宽度。由于图像高度始终大于视口高度，您应该能够滚动到图像底部，也应该是网站底部。

如果有人能告诉我该怎么做，我将不胜感激。

Answer 1

我认为其他评论者在不断建议使用 background-size: cover.

时忽略了您对图像 "cropping" 的帮助请求

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

作为背景的图片，位于您网站内容的后面。
背景图片具有特定的纵横比，不应裁剪
如果浏览器 window 与图像纵横比不匹配，它应允许垂直滚动，但应始终适合 windows 宽度。

一个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 应该如何计算。

这会在网站主体内创建一个单独的背景元素，并且仍然允许您在网站内拥有任何您想要的内容。但请记住，如果您在非常小的屏幕上，比如 320 像素/480 像素，并且网站内容由于屏幕宽度变窄而变得非常高，则可以滚动传递此背景图像以说明内容。这不会破坏此代码，但我只是建议向您的 html 元素添加背景颜色或纹理，在本例中它会显示在图像下方。祝你好运。

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

fit background image to browser width and expand height if necessary

css

scroll

background-image

scale

responsive-design