CSS SVG ClipPath - Fit path to height - html

Question

The task
I'm trying to have an image which is the full height of the screen, and clipped with an SVG mask, which is also full height.
The problem
Although the image is full height, the SVG clipping is always the same size and will not resize to the full height of the image.
I've read about using: clipPathUnits="objectBoundingBox"
on the clipPath, but this seems to break it further.
CSS:
img {
position: absolute;
clip-path: url(#path);
-webkit-clip-path: url(#path);
width: 100%;
height: 100%;
}
HTML:
<div>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 440">
<defs>
<clipPath id="path">
<path d="m54.3,1c64,1 89.3,85 89.8,85.6c1,0.4 7,37 19,53.7c11.8,16.6 30.7,28.5 35,33.8c4.3,6 9,8 4.8,17s-18.8,7 -24.8,20c-6,13.7 7.5,11 8.6,22c1,11 -31.2,14 -29.6,27c1.4,13 22.4,12 24,23c1.5,11.6 -9,10 -13,18c-3.8,8 15.6,20 5,38c-11,18.5 -57.7,7 -84,32.5c-26.4,25.3 -35.5,70 -34.4,70.4c1,0.4 -64,3 -61.8,-1c2.1,-4 -4.9,-440 2.1,-440s-4.6,-1 59.4,0l-0.1,0z"/>
</clipPath>
</defs>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg">
</svg>
</div>
jsFiddle showing problem - https://jsfiddle.net/kjnovege/1/
Is there any way to achieve this?