1

全图无法正常显示，图像底部缺失，如何在屏幕上显示全图？（尺寸：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 上分享了这个问题的视频：这里

4

2 回答 2

1

你不能同时拥有：

  1. 图像充分显示
  2. 让图像覆盖整个背景

请记住，图像的比例是固定的，大多数屏幕的比例与您的图像不同，更不用说由于浏览器工具栏和操作系统工具栏而导致的实际可视区域（视口）的差异。

您的选择是：

  1. 使用 .让图像始终是全角的width:100%。如果图像比视口高，则可能会在该底部截断图像的一部分，或者如果图像比视口短，则在底部有一些空白区域。
  2. 使用 .让图像始终是全高的height: 100%。如果图像比视口宽，则图像的一部分可能会在右侧被截断，如果图像不如视口宽，则可能会出现一些空白。
  3. 用于backgorund-repeat使图像垂直或水平重复以覆盖任何空白。

您可以在 CSS 中找到的大多数其他选项都结合了上述选项，并添加了一些附加功能，例如将图像居中放置在有空白区域的位置。

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

于 2020-07-11T17:20:47.260 回答
0

看看这段代码：

<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使用property让我们的div垂直滚动

于 2020-07-11T18:38:29.133 回答