CSS: pinch to zoom with CSS? - html

Question

Here's a fiddle with my HTMl and CSS:
https://jsfiddle.net/e06btr2w/2/
This is a sample of a simple UI for categorising images. The user should be shown an overview of the image (i.e. the entire image) but be able to zoom in and pan for closer inspection if necessary.
I would like to allow the user to pan and pinch zoom the image only, without affecting the other UI elements.
Is this possible with CSS only? I'm not a day to day web dev any more, but I see there's a touch-action CSS rule now which I thought would do what I want, but it doesn't seem to:
touch-action: pinch-zoom pan-x pan-y;
Maybe I'm using it wrong? I know this is possible with some JS but thought it would be much simpler if it could be CSS only.
HTML:
<div class="target fill">
<img class="classification" src="https://c4.wallpaperflare.com/wallpaper/528/806/409/1920x1080-beach-desktop-background-wallpaper-preview.jpg" />
</div>
<div class="destinations">
<form method="post" action="/SortClassifications/">
<input type="hidden" name="target" value="ForRemoval" />
<input type="hidden" name="filename" value="2022-01-17-223050.png" />
<input name="destination" type="submit" class="btn btn-danger" value="Remove" />
</form>
<form method="post" action="/SortClassifications/">
<input type="hidden" name="target" value="Attack" />
<input type="hidden" name="filename" value="2022-01-17-223050.png" />
<input name="destination" type="submit" class="btn btn-primary" value="Attack" />
</form>
<form method="post" action="/SortClassifications/">
<input type="hidden" name="target" value="Back" />
<input type="hidden" name="filename" value="2022-01-17-223050.png" />
<input name="destination" type="submit" class="btn btn-primary" value="Back" />
</form>
<form class="undo" style="float: right;" method="post" action="/SortClassifications/Home/Undo?undoFile=2022-01-17-223039.png&undoTarget=Claim">
<input name="destination" type="submit" class="btn btn-warning" value="Undo" />
</form>
</div>
CSS
body {
background-color: black;
position: relative;
}
.container {
height: 100%;
width: 100%;
}
.classification {
width: 100%;
top: 50%;
margin-bottom: 20px;
}
div.destinations {
position: fixed;
bottom: 0px;
left: 0px;
max-width: 80%;
}
.destinations form {
float: left;
margin: 0 20px 10px 0;
}
.destinations .undo {
margin-right: 20px;
position: fixed;
right: 0px;
}
.fill {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.fill img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
.target {
width: 100%;
height: 100%;
touch-action: pinch-zoom pan-x pan-y;
}
html {
position: relative;
min-height: 100%;
}