Responsive ThreeJS PlaneGeometry

I’m trying to get more familiar with ThreeJS and shaders. Currently trying to make a shader that creates water ripples on a background Image so I’ve created this:

https://jsfiddle.net/9yx2jadg/3/

It works as I was hoping but I can’t seem to wrap my head around scaling the plane responsively for different screen aspect ratios, or am I meant to be adjusting the frustum?

At the moment what happens is that as you change the screen/browser size the image itself either distorts and stretches or you get black bars above and below or to the side of the image.

The following code is from line 111 of the Javascript of the JSFiddle:

const updateImagePlaneScale = () => {

    // Image aspect ratio
    const imageAspectRatio = 2000 / 1333;

    // Viewport aspect ratio
    const viewportAspectRatio = sizes.width / sizes.height;

    
    // Ensure the imagePlane always fills the the largest dimension of the viewport and maintains aspect ratio for the other axis

    // If the viewport is wider than the image
    if (viewportAspectRatio > imageAspectRatio) {
        imagePlane.scale.x = frustumSize * viewportAspectRatio;
        imagePlane.scale.y = frustumSize;
    } else {
        imagePlane.scale.x = frustumSize * imageAspectRatio;
        imagePlane.scale.y = frustumSize / viewportAspectRatio;
    }    
};

Ideally, I’d like to have it behave in the same manner as the CSS background-size:cover property. Wether it be by scaling the plane up, or cropping the camera fustrums? I just can’t seem to understand how to do it in ThreeJS

I’ve tried scaling the plane and fiddling with the frustums but they just cause the same issue in different ways or other issues.