如何放大和正確 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