4:3屏幕的CSS优化

Question

我在CSS中遇到了一个优化问题。

在我的网站上，我有视频背景，在16:9的屏幕上，它工作得很完美，但是在4:3的屏幕上，顶部和底部都有灰色的边距。

在CSS中是否有任何方法(使用媒体查询或其他什么)来设置图像或颜色背景？

所以我知道媒体查询是如何工作的，但是我需要代码，所以我不需要使用px，而是屏幕比率？

    #Homepage{
    width:100vw;
    height:100vh;
    z-index:2;
    background-position:center;}

    video.bgvid { 
    position:fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height:100vh;
    border:1px solid red;
    z-index: -100;
    background: url("../img/bg3.jpg") no-repeat;}
video{width:100%;}

.overlay{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background-color: rgba(0, 0, 0, 0.8);}

Answer 1

是的，这帮了我@media screen and (device-aspect-ratio: 4/3) { ... }