叠加360Pano，自适应和保持比例

Question

有可能像下面的CSS一样 在360度全景图上覆盖透明的空白空间，以响应并保持比例

我尝试创建4个div并使用此CSS，但更改为屏幕以将16：9的比例转到4：3 .....

<div><div></div><div></div><div></div><div></div></div>

#frame  div:nth-child(1) {
    z-index:10;
    width: 30%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#frame  div:nth-child(2) {
    z-index:10;
    width: 30%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
#frame  div:nth-child(3) {
    z-index:10;
    width: 40%;
    height: 20%;
    position: absolute;
    left: 30%;
    top: 0;
}
#frame  div:nth-child(4) {
    z-index:10;
    width: 40%;
    height: 20%;
    position: absolute;
    left: 30%;
    bottom: 0;
}