如何放大和正确 position 来自精灵的图像？

Question

I have many images of documents combined into a sprite.我有许多文档图像组合成一个精灵。 I am able to display a small size version of the image with commentary.我可以显示带有评论的小尺寸版本的图像。 However I also want to enlarge the image to a more readable size, if the user selects the small image, and still have the commentary visible.但是，如果用户选择小图像，我也想将图像放大到更易读的大小，并且仍然可以看到评论。

I have not been able to figure out a way to enlarge and correctly position the images.我还没有找到一种方法来放大和正确地 position 图像。 I've tried so many ways I'm exhausted.我已经尝试了很多方法，我已经筋疲力尽了。 Here are three attempts with the result they produced.这是他们产生的结果的三个尝试。 All these seem very similar.所有这些看起来都非常相似。 I have added a div with a green background to show where the top left hand corner of the image should be placed.我添加了一个绿色背景的 div 来显示图像左上角的位置。 ''' '''

<!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>

‘’’

''' '''

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>
‘’’

''' '''

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>
‘’’

Answer 1

I solved it by using transform-origin: top left;我通过使用 transform-origin: top left; 解决了它

如何放大和正确 position 来自精灵的图像？

问题描述

1 个解决方案

解决方案1
0 2022-09-05 18:38:42

如何放大和正确 position 来自精灵的图像？

问题描述

1 个解决方案

解决方案1 0 2022-09-05 18:38:42

解决方案1
0 2022-09-05 18:38:42