Question

I have an image on a webpage. It’s a pretty big image, however. It’s 6144*768. In actuality, it is a series of 6 images mushed together.

I read that it’s better practice to load this one image instead of loading 6 images. I’ve found this to be true as well, when I used tables and CSS.

However, when I set this image as the source of an image element and then set the size of the image element to 1024*768, the image is squished. Ack!

How can I get this image to be not-squished by using only Javascript? Also, how could I move the background of the image?

[example: Imagine a really long strip of paper. Then, place a small cut-out rectangle of paper over that somewhere on the strip of paper, so that you can only see the part of the strip that is inside the rectangle. This is what I want to do]

Answer 1

Place the image inside a container element, and set the overflow to hidden using CSS.
Leave the image as it is and it won’t be squished

HTML

<div id="imgContainer">
    <img src="myImage.jpg" alt="" width="6144" height="768" />
</div>

CSS

#imgContainer
{
    height: 1024px;
    width: 768px;
    overflow: hidden;
}

Then to move the image use negative values for the CSS style margin-left.

#imgContainer img
{
    margin-left: -1024px;
}

You can do this with jQuery as follows

$("#imgContainer img").css("margin-left", "-1024px")