随分辨率变化缩放背景图像答案

【问题标题】：Scale background image with changing resolution随分辨率变化缩放背景图像
【发布时间】：2019-09-06 17:50:59
【问题描述】：

我创建了一个热点登录站点，该站点必须适用于具有较小分辨率/屏幕的设备，因此我的背景必须随之扩展。现在的问题是比例尺，但它粘在屏幕顶部。因此，当分辨率变得太小时，图像下方会出现白色空白。看起来是这样的：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;

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：