CSS：用 CSS 捏缩放？

Question

这是我的 HTMl 和 CSS 的小提琴：

https://jsfiddle.net/e06btr2w/2/

这是用于对图像进行分类的简单 UI 示例。 应向用户显示图像的概览（即整个图像），但必要时可以放大和平移以进行更仔细的检查。

我想只允许用户平移和捏缩放图像，而不影响其他 UI 元素。

这是否仅适用于 CSS？ 我不再是日常 web 开发人员，但我看到现在有一个触摸动作 CSS 规则，我认为它会做我想做的事，但它似乎没有：

touch-action: pinch-zoom pan-x pan-y;

也许我用错了？ 我知道这对于一些 JS 是可能的，但认为如果它只能是 CSS 会简单得多。

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&amp;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%;
}