How can I enlarge & correctly position an image from a sprite?
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. 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. '''
<!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>
‘’’
1 answers
solution1
0 2022-09-05 18:38:42
I solved it by using transform-origin: top left;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.