如何缩放svg图像以适合容器？

So I have two svg images and one is positioned left, and one is positioned right. They both have a height of 100% and a width of 50%. The images are not scaling to fit the container and I have tried everything. I've tried to fiddle with the viewbox but can't quite get it. The preserveAspectRatio almost gets it with none but it squashes the images when you resize the browser. Slice almost gets it but one picture overlaps the other. I have tried everything but is coming up empty. Does anyone have any suggestion? I'm trying to get rid of the white space and have the picture cover the background but css background: cover does not work.

这是我的代码：

header {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    // background: black;

    .airplane {
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }

    .wings {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;

        // background-image: linear-gradient(rgba(black, 0.))
    }

    .airplaneleft {
        position: absolute;
        top: 0;
        right: 0;
        // background: red;
        animation: left 2s forwards;
    }

    .airplaneright {
        position: absolute;
        top: 0;
        left: 0;
        // background: black;
        animation: right 2s forwards;
    }



HTML

<header>
        <div class="menu">
            <input type="checkbox" class="toggler">
            <span></span>
        </div>
        <nav class="navbar">
            <ul class="links">
                <li class="link"><a href="#">Home</a></li>
                <li class="link"><a href="#">About</a></li>
                <li class="link"><a href="#">Aviation</a></li>
                <li class="link"><a href="#">Contact</a></li>
                <li class="link"><a href="#">Projects</a></li>
            </ul>
        </nav>
        <div class="intro">
            <h1 class="name"><span class="first">Jovan </span class="last"><span>Elmore</span></h1>
            <h2 class="title">Aviation Specalist</h2>
        </div>
        <div class="airplane">
            <img class="airplaneleft wings" src="\imgs\FfRZvZFh01.svg" alt="left side of airplane">
            <img class="airplaneright wings" src="\imgs\VRjCKGg201.svg" alt="right side of airplane">
        </div>
    </header>