显示图像的一部分（图像条中的子图像）而不会压扁它？

Question

我在网页上有一张图片。然而，这是一个非常大的形象。这是6144 * 768。实际上，它是一系列共同拍摄的6幅图像。

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

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

如何通过仅使用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")

Answer 2

OP正在寻找的是CSS Sprites（另见A List Apart或Smashingmag）。

Answer 3

不要使用CSS缩放图像;相反，把它放在一个包装器div中，并在你的CSS中做这样的事情：

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