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

Question

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

如果有人能告诉我如何做到这一点，我将不胜感激。

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

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