Avoid image stretching and cover instead

I am trying to adapt/cover the image in this scene to the actual browser dimensions (basically simulate the object-fit: cover from CSS).

The result of my setup seems to sort of crop the image and create these lines on the edges.
I am afraid the issue comes from my shader, but I am not able to figure it out.

Does someone know how this could be achieved?

Thanks a lot in advance

Here is my shader code for reference:

const vertex = `precision mediump float;
uniform float u_time;
varying vec3 texcoords;
uniform float u_amplitude;
uniform float u_freq;
uniform vec2 u_mouse;

void main() {
  vec2 st = position.xy / 30.;
  vec2 mc = u_mouse - 0.1;

  vec2 point = vec2(0.5);

  float l = length(vec2(st.x - mc.x, st.y + mc.y));
  float angle = (u_time*0.5 + l*30.) * u_freq;

  float oscillation =  sin(angle) * u_amplitude;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy, oscillation, 1.0);
  texcoords =  vec3(position.xy, oscillation);

const fragment =  `precision mediump float;
uniform vec2 u_res;
uniform sampler2D u_texture;
varying vec3 texcoords;
uniform float u_amplitude;

void main() {
  vec2 a = texcoords.xy / 30. + 0.5;
  gl_FragColor = mix(texture2D(u_texture, a), vec4(vec3(0.),1.),-texcoords.z/u_amplitude/8.);


Check out this short video from Yuri where he shows how to implement a fullscreen image: