Can WordPress resize images & bg images responsively together?

I have two images, a JPG and an SVG, that must be overlaid, the JPG on top of the SVG. They both must resize exactly proportionally as the viewport dimensions change, and not just at specific breakpoints, but continually. The JPG is an image in a figure (<figure><img/></figure>) tag set and the SVG is a CSS background: url(/url/to/image.svg). The background image looks like a picture frame around the <figure> image, so to keep them looking like they’re one unit, it’s critical that they each maintain the same aspect ratio as the viewport resizes to any dimension.

I am at a loss as to how to make this happen without either or both getting out of sync and the <figure> image is overlapping the background, or the background is getting too large for the <figure>. Here’s what I’ve tried.

<figure class="outline-img">

    <img 
        width="1024" height="682" 
        src="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg" 
        class="attachment-large size-large" 
        alt="" 
        loading="lazy" 
        data-src="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg" 
        data-srcset="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg 1024w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-300x200.jpeg 300w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-768x512.jpeg 768w" 
        data-sizes="(min-width: 960px) 75vw, 100vw"
        srcset="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg 1024w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-300x200.jpeg 300w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-768x512.jpeg 768w" 
        sizes="(min-width: 960px) 75vw, 100vw">
            
</figure>

This is the CSS for the background as it’s currently constituted:

.outline-img {
    padding: 9.4%;
    width: 118%!important;
    background: url(/wp-content/uploads/2021/09/frame.svg);
    background-repeat: space;
    background-position: 50%;
}

The weird padding and width values are how I’m currently attempting to "hold" the image within the SVG image’s dimensions. Any padding less than that clips the outer edges of the SVG image. Any width less than that makes the image not fit in the SVG’s inner edges. And when I resize the browser, the framed image doesn’t "stick" to the inner dimensions of the SVG.

I’d love to know if there’s an easier way to do this. I tried suggesting making both of these into one JPG image, but the designer is interested in this solution primarily.