CODEWITHSUNDEEP
htmlcsscss-sprites
Hobbyist
Hobbyist

Reputation: 39

Why is the bottom of my compressed JPEG sprite truncated?

I have a very simple bit of code to display a single image from a sprite.

When the “Sprite“ only has one image, it works perfectly. When there are three images, even though the first image is exactly the same size, the bottom of the image is truncated. I can’t think of any reason why this is happening. I put the img inside a div and gave the div a height of 100%, but this didn’t make any difference.

Here’s my code:

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

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

<div style="height: 100%">
<img id="img1" src="bates-sprite.jpeg">
</div>

</body>
</html>

Full image displayed

Bottom of image truncated

Upvotes: 0

Views: 59

Answers (1)

Hobbyist
Hobbyist

Reputation: 39

I don’t know why the multiple image sprite behaves differently, but setting style="height: 100vh;” solves the problem.

Upvotes: 0

Related Questions