在CSS中设置背景图像后，如果调整窗口大小，内容将被剪切为空
当我用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属性。请帮帮忙。
共有1个答案
将background-size：cover；添加到.main-section
-
我有下面的代码，它设置了一个特定大小的窗口。它还从外部URL加载图像。
-
问题内容： 试图在“分成两部分”的页面上获得背景；相对两侧的两种颜色（似乎是通过在标记上设置默认值，然后将另一种颜色应用到可拉伸整个窗口宽度的来完成的）。 我确实提出了一个解决方案，但不幸的是，该属性在IE7 / 8中不起作用，这对于该项目是必不可少的- 由于它只是纯色，也许有一种只使用常规属性的方法吗？ 问题答案： 如果必须有较旧的浏览器支持，那么您就不能同时使用多个背景或渐变，那么您可能需要对
-
问题内容： 我试图将背景尺寸设置为窗口尺寸。但是，这很挑剔。我没有使用css文件格式。 这是实现窗口的主要部分。 这是实现背景和阶段的身体部位。 我厌倦了使用BackgroundSize.AUTO，但是我不能。我应该怎么做才能得到解决方案？ 如果可以，我可以使用css格式怎么使用？但是我无法重写和修改很多代码，因为我的工作快完成了，我正在集成和调试。 问题答案： 如果要拉伸图像以填满整个图像，则应
-
问题内容： 我想显示具有特定宽度和高度的URL的图像，即使它 具有不同的尺寸比例。所以我想调整大小（保持比例）， 然后将图像切成我想要的大小。 我可以使用html img属性调整大小，也可以使用剪切background-image。 我该怎么办？ 例： 这个图片： 具有800x600像素大小，我想显示为200x100 像素图像 通过img我可以调整图像大小200x150px： 这给了我这个： 而且
-
当我试图将页面大小调整为7.31 x 11时，该页面中的一些内容会从窗口中被裁剪掉。下面是我的输出文档的链接。 http://www.filedropper.com/mynewdocument 下面是我的源代码
-
问题内容： 我有这个HTML： 使用此CSS： 我正在应用的背景图像是200x100像素，但我只想显示200x50像素的背景图像的裁剪部分。 似乎不是正确的CSS属性。我该怎么用呢？ 不应使用，因为我在Sprite上下文中使用了上述CSS，在该Sprite上下文中，我要显示的图像部分小于定义CSS的元素。 问题答案： 您可以将图形放置在具有其自身尺寸上下文的伪元素中： 浏览器支持很好，但是如果需要