I have a large image strip measuring 130560 x 1080. My goal is to load it into an image tag and use the parent div as a viewport, showing only one section of the image at a time.
However, I'm encountering a problem when specifying the height and width of the image. If I don't specify these attributes, the image displays correctly. But if I do set a specific height and width (e.g., width=54442 height=432) in order to scale it to 40%, the image disappears. I've tried adjusting the values through CSS, attributes, and even using the Chrome debugger interactively, but any value for height causes the image to vanish.
<html>
<head>
<style>
#imgContainer
{
width: 768px;
height: 432px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="imgContainer">
<img src="complete.png" id='montage' height="432px"/>
</div>
</body>
</html>
I have successfully used this technique with smaller jpg files, but I haven't tested it on a PNG or a file of this particular size before.
If anyone wants to experiment with this, you can download the file from the following link: https://drive.google.com/file/d/0B_sWWl4f5UpESGEtRUdYbklQX0U/view?usp=sharing Please note that the file size is quite large, approximately 12MB.