当我用CSS设置背景图像时，我的布局有问题。我已经在谷歌上查过了，但是找不到有完全相同问题的人，而且没有一个解决方案适用。
我正在尝试做的是创建一个页面，其背景图像填充整个屏幕的高度。考虑这个简单的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，试着用每一个可能的值打乱最小高度属性，试着用background-size属性，并为所有这些属性设置不同的值。
我想要实现的是：背景图像填充整个屏幕的高度，同时保持其原有的纵横比，如果它水平溢出就可以了。当调整窗口大小时，背景图像应该相应地调整大小（或者不调整，这并不重要），如果它变得比其内容小，滚动后它们应该仍然可见，而不是剪切和显示白色/空的空间。
我想我遗漏了一些非常明显的东西，或者我没有按照预期使用background-image属性。请帮帮忙。
将background-size：cover；添加到.main-section
