在CSS中以较小的屏幕裁剪背景图像

Question

我正在尝试设置背景图像，该背景图像将以屏幕分辨率的每个比例拍摄完整图像。我的代码适用于特定的屏幕分辨率。如果我减小浏览器分辨率，则100％背景图像将被相应地裁剪。但是我不要这个。这是我的代码。预先感谢

.background1 {
    background: url('/images/home/background_img.png'),linear-gradient(270deg, rgba(4, 202, 160, 
  1) 0%, rgba(141, 198, 63, 1) 100%);
    margin-top: -60px;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:100% 100%;
    background-position:center;

}

Answer 1

将高度设置为视口宽度单位（vw）或使用填充技巧强制执行宽高比。参见this related question.