如何在html,css中插入全屏大背景图片？

Question

全图显示不正常，图片底部不见了，如何在屏幕上显示全图？（尺寸：5904 * 4000 像素）

我试过对象拟合但它不起作用:

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 100vh;
  background: url("adult-blur.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;
  object-fit: cover;
  object-position: bottom top;
}

我还在 facebook 上分享了这个问题的视频：here

Answer 1

你不能同时拥有：

图片显示完整
让图片覆盖整个背景

请记住，图像的比例是固定的，大多数屏幕的比例都与您的图像不同，更不用说实际可视区域（视口）因浏览器工具栏和 OS 工具栏而产生的差异。

您的选择是：

使用 width:100% 让图像始终是全角的。如果图像比视口高，则可能会在底部截断一部分图像，如果图像比视口短，则可能会在底部有一些白色-space。
使用 height: 100% 让图像始终为全高。如果图像比视口宽，则可能会在右侧截断一部分图像，或者如果它不如视口那么宽，则会有一些白色space。
使用backgorund-repeat使图像垂直或水平重复以覆盖任何白色space。

您可以在 CSS 中找到的大多数其他选项都是上述选项的组合，并添加了一些选项，例如在有白色的图像中居中 -space。

大多数设计师 select 考虑到这一点，选择边缘附近没有任何重要细节的图像，因此即使在任何一端切掉一小部分仍然看起来不错。

Answer 2

查看此代码：

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <style>
            #body-container {
                width: 100%;
                height: 100vh;
                background: url("j.jpg") center center no-repeat;
                background-size: cover;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div id="body-container">
            <!-- Place your document contents here -->          
        </div>
    <body>
</html>

这里我们使用了bootstrap-4。将文档正文的所有内容放入 div 容器中。在样式中，background-size 用于使我们的图像宽度 n 高度为 100%。如果图片拉伸的很厉害，你也可以试试background-size: cover。最后，overflow-y 属性用于使我们的 div 垂直滚动

如何在html,css中插入全屏大背景图片？

how to insert a full screen large background image in html,css?

html

css

object-fit