Placing image inside the SVG container

I'm looking for help to insert an image into a white SVG container.

I want the SVG to be resizable based on width and height, without stretching the image. Once the image is "inside" the SVG, I should be able to see the blue background.

Below is my current code.

    <style>
        .svg-container{
            background-image: url( 'https://dummyimage.com/1080x1920/000/fff.png' );
            background-size:cover;
            background-position: center;
}

    </style>
    <div class="parent" style="height: 500px; display: flex;">
        <div class="clild1" style="width: 50%; height: 100%; background-color: bisque;">
        </div>
        <div class="child2"  style="width: 50%; height: 100%; background-color: blue;">
            <div class="svg-container" style="width: 100%; height: 100%;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.967 906.027" style="width: 100%; height: 100%;" preserveAspectRatio="none">
                    
                    <!-- SVG content -->
                    <g id="DSC_5358-Edit" transform="translate(-0.033 23.834)" fill="white">
                        <path d="M.033,84.049,512-23.834V882.192L.033,696.119Z" stroke="none"/>
                        <path d="M 507.0001220703125 -17.6710205078125 L 5.0333251953125 88.10479736328125 L 5.0333251953125 692.6162719726562 L 507.0001220703125 875.0551147460938 L 507.0001220703125 -17.6710205078125 M 512.0001220703125 -23.83447265625 L 512.0001220703125 882.1923828125 L 0.0333251953125 696.1190795898438 L 0.0333251953125 84.048583984375 L 512.0001220703125 -23.83447265625 Z" stroke="none" fill="#6e6e6e"/>
                    </g>
                </svg>
            </div>
        </div>
    </div>

Can you share link to page where you added the code? We can test/adjust it easier

This is the link to the website: 
https://cyan-rhombus-xz7h.squarespace.com 
Password: 1234

This is the look I'm hoping to achieve.

On 3/5/2024 at 5:09 PM, tuanphan said:

Can you share link to page where you added the code? We can test/adjust it easier

Updated 

I managed to solve the issue of placing the image in the SVG however I'm encountering an issue with fitting the SVG to the full height of its container. Presently, it appears too large and gets cut off. I attempted to use preserveAspectRatio(xMidYMid meet), but it doesn't stretch to fill the container. Any suggestions on how to resolve this?

This is the link to the website: 
https://cyan-rhombus-xz7h.squarespace.com 
Password: 1234