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

Question

我有许多文档图像组合成一个精灵。 我可以显示带有评论的小尺寸版本的图像。 但是，如果用户选择小图像，我也想将图像放大到更易读的大小，并且仍然可以看到评论。

我还没有找到一种方法来放大和正确地 position 图像。 我已经尝试了很多方法，我已经筋疲力尽了。 这是他们产生的结果的三个尝试。 所有这些看起来都非常相似。 我添加了一个绿色背景的 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

我通过使用 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