多个元素的响应大小

如何解决多个元素的响应大小

我正在尝试获取代码的多个元素以响应视口高度和宽度的变化。当我的屏幕设置为1412x150尺寸时，每个元素都可以完美地适合，但是当改变时，这将成为问题。考虑到背景图像是60-40的比例，我用于登录部分的图形和框向左掠过了。

我只是想知道css中是否有任何代码可以让我根据1412x150的外观来设置这些尺寸，而不管屏幕如何变化？

我目前使用以下样式代码将它们放在容器中：

.container {
            z-index:1001;
            float:right;
            position:sticky;
            padding-top:8%;
            padding-left:45%;
            padding-right:10vh;
            object-fit:cover;
            object-position:right;
    
        }
    
        .container-2 {
            z-index:1001;
            float:right;
            position:sticky;
            padding-top:7%;
            padding-left:45%;
            padding-right:11%;
            object-fit:cover;
            object-position:right;
        }
    
    .label {
        font-size:30px;
        font-weight: bold;
        color:white;
    }
    
        .split {
          position: absolute;
          width: 50%;
          height: 100%;
          overflow: hidden;
        }

谢谢