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

Question

我的网页上有一张图片。但是，这是一个很大的形象。是6144 * 768。实际上，它是将六个图像混合在一起的一系列图像。

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

但是，当我将此图像设置为图像元素的来源，然后将图像元素的大小设置为1024 * 768时，图像将被压缩。阿克！

如何仅使用Javascript获得不压缩的图像？另外，如何移动图像的背景？

[示例：想像一下很长的纸条。然后，在纸条上的某个位置上放置一个小的切出的矩形纸，以便您只能看到纸条中位于矩形内部的部分。这是我想做的]

Answer 1

将图像放置在容器元素内，并使用CSS将溢出设置为隐藏。保留图像原样，图像不会被压缩

的HTML

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

的CSS

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

然后使用CSS样式的负值移动图像margin-left。

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

您可以使用jQuery进行以下操作

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