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

【问题标题】：fit background image to browser width and expand height if necessary使背景图像适合浏览器宽度并在必要时扩展高度
【发布时间】：2019-11-02 18:05:03
【问题描述】：

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

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

【问题讨论】：

查看background-size 属性，cover 或contain 可能很有用：w3schools.com/cssref/css3_pr_background-size.asp

标签： css scroll responsive-design background-image scale

【解决方案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 元素添加背景颜色或纹理，在这种情况下，它将显示在图像下方。祝你好运。

【讨论】：

好东西！谢谢?