在 CSS 中设置背景图像后，如果调整窗口大小，内容将被剪切到空白区域

问题描述

当我使用 CSS 设置背景图像时，我的布局出现问题。我已经浏览了 Google 和 SO，但找不到遇到完全相同问题的人，并且没有应用任何解决方案。

我想要做的是创建一个页面，其背景图像填充整个屏幕高度。考虑这个简单的 html 页面：

<html>
  <body>
    <section class="main-section">
        <div class="my-div"></div>
    </section>
  </body>
</html>

在 CSS 中我有两个选择器：

.main-section {
    background-image: url("../images/image-hero.jpg");
    height:100vh;
} 

.my-div {
    width:500px;
    height:500px;
    border-style:solid;
    border-color:white;
}

它工作正常，除非我调整窗口大小。如果将浏览器的大小调整为小于 div 的宽度和高度的值，则会出现滚动条并剪切内容。这是说明行为的 300kb gif。

https://i.imgur.com/fS46akt.gif

我尝试将高度更改为 % 而不是 vh,auto，尝试使用每个可能的值来处理 minimum-height 属性，尝试使用 background-size 属性，并为所有这些属性设置不同的值。

我想要实现的是：背景图像在保持其原始纵横比的同时填充屏幕的整个高度，如果它水平溢出也可以。当窗口被调整大小时，背景图像应该相应地调整大小（或者不，这并不重要），如果它变得比它的内容小，滚动后它们应该仍然可见，而不是剪切和显示白色/空白空间。

我想我遗漏了一些非常明显的东西，或者我没有按预期使用 background-image 属性。请帮忙。

解决方法

将 background-size: cover; 添加到 .main-section

html responsive-images