如何放大并准确定位精灵图（Sprite）中的图片？

我将多张文档图片合并为一张精灵图（Sprite），目前可显示带有注释的小尺寸图片。但希望实现：当用户点击该小图时，将图片放大至更易阅读的尺寸，同时仍保留注释可见。

尝试多种方法均未成功实现图片的放大与准确定位，以下是三次尝试的代码及对应效果：

尝试1 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

figure {display: block;
        border-width:thin;
}
figcaption {background-color:yellow;}

#img1, #img2, #img3 {
    object-fit: none;
    object-position: 0 0;
    width:  816px; // full size 3264
    height: 612px; // full size 2448
}
</style>
</head>
<body>

<figure id="fig1">
    <figcaption>Camberley Mail</figcaption>
        <img id="img1" src="bates-sprite.jpeg"
             style="height: 100vh;
                    transform: scale(2,2);
                    position: "absolute";
                    top: 206px;
                    left: 48px;">

    aa<p>Text to go with picture.</p>

</figure>
<div style="position: absolute; top: 206px; left: 48px; color: white;
            background-color: green;">====== 206px ======</div>

</body>
</html>

尝试2 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

figure {display: block;
        border-width:thin;
}
figcaption {background-color:yellow;}

#img1, #img2, #img3 {
  background: url("bates-sprite.jpeg");
  background-repeat: no-repeat;
  object-fit: none;
  object-position: 0 0;
  width:  816px; // full size 3264
  height: 612px; // full size 2448
}
</style>
</head>
<body>

<figure id="fig1">
    <figcaption>Camberley Mail</figcaption>
    <img id="img1" src="bates-sprite.jpeg"
         style="height: 100vh;
                transform: scale(2,2);">
    <p>Text to go with picture.</p>

</figure>
<div style="position: absolute; top: 206px; left: 48px; color: white;
            background-color: green;">====== 206px ======</div>
    <script>
    "use strict";
    const img = document.getElementById ('img1');
    img.style.position = 'absolute';
    img.style.left = "48px";
    img.style.top = "206px";
    </script>
</body>
</html>

尝试3 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

figure {display: block;
        border-width:thin;
}
figcaption {background-color:yellow;}

#img1, #img2, #img3 {
  object-fit: none;
  object-position: 0 0;
  width:  816px; // full size 3264
  height: 612px; // full size 2448
}
</style>
</head>
<body>

<figure id="fig1">
    <figcaption>Camberley Mail</figcaption>
    <img id="img1" src="bates-sprite.jpeg"
         style="height: 100vh;
                transform: scale(2,2) translate(48px,206px);">

    <p>Text to go with picture.</p>

</figure>
<div style="position: absolute; top: 206px; left: 48px; color: white;
            background-color: green;">====== 206px ======</div>

</body>
</html>

内容的提问来源于stack exchange，提问作者Hobbyist