html - 随分辨率变化缩放背景图像

Question

我创建了一个热点登录站点，该站点必须适用于分辨率/屏幕较小的设备，因此我的背景必须随之扩展。现在的问题是比例尺，但它粘在屏幕顶部。因此，当分辨率变得太小时，图像下方会出现白色空白。这看起来像：https ://imgur.com/a/0jAprjJ

这是我用于背景样式的 CSS 代码：

background-image: url("img/AngelnträgtGelb.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

标签： htmlcss

Answer 1

您可以做的是对屏幕尺寸小于的媒体查询，无论它在哪里中断并将其用于您的图像尺寸：

@media only screen and (max-width: 600px) {
  body {
    background-size: auto 100vh;
    background-position: center;
  }
}