Javascript 显示部分图像（图像条中的子图像）而不挤压它？

我有一个网页上的图像。然而，这是一个相当大的形象。是6144*768。事实上，这是一系列的6张图片混在一起

我读到最好的做法是加载一个图像，而不是加载6个图像。当我使用表格和CSS时，我发现这也是正确的

但是，当我将此图像设置为图像元素的源，然后将图像元素的大小设置为1024*768时，图像会被压扁。啊

我怎样才能让这个图像不被压扁只用Javascript？另外，如何移动图像的背景

---

[示例：想象一张很长的纸条。然后，在纸条上的某个地方放一个小的剪切矩形，这样你只能看到矩形内的部分。这就是我想做的]

不要用CSS缩放图像；相反，将其放在包装器div中，并在CSS中执行如下操作：

#myImageWrapper {
    height: 1024;
    width: 768;
    overflow: hidden;
}

---

OP要查找的是（另请参见或）。

将图像放在容器元素中，并使用CSS将溢出设置为隐藏。 让图像保持原样，它就不会被压扁

HTML 然后，要移动图像，请为CSS样式

左边距
使用负值

您可以使用jQuery执行此操作，如下所示

只是不要在CSS中设置图像的大小；它本身应该可以适当缩放。@ElliotBonneville:但他真的想裁剪图像，以获得6个完整尺寸版本中的1个。@Ed S.啊，没错。看看我的答案，我该怎么做？我相信这就是我已经在做的事情——但我的形象被压扁了。“我相信这就是我已经在做的事情”>可能你做错了什么。只要你不发布代码，我们只能猜测出哪里出了问题（我们不清楚），并为你指出正确的方向。你有没有按照上面的说明去做？你能发布你的（相关的）html/css吗？这太复杂了，事情其实很简单。罗比尔：是的，你是对的，我做错了什么。我改变了图片的边距，而不是分区的边距。无论如何，谢谢。这对我不起作用。这个包装器div还有什么需要我做的吗？@JavaAndCSharp：不用说，但是您创建了一个id为“myImageWrapper”的div，并将您的图像元素放在其中？我看到的唯一问题是OP如何显示图像2、3。。。？他还需要一个补偿。请恕我直言，因为我不是一个喜欢上网的人。是的，那是他必须做的。有一些为jQuery编写的插件可以做到这一点（动画，甚至！），使用香草Javascript也不难。好吧，我发现了问题：我设置的是图像的边距，而不是div的边距。无论如何，谢谢。
<div id="imgContainer">
    <img src="myImage.jpg" alt="" width="6144" height="768" />
</div>

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

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

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