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) { ... }