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

Question

我在网页上有一张图片。然而，这是一个相当大的图像。它是 6144*768。实际上，它是一组 6 个图像混合在一起。

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

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

如何仅使用 Javascript 使该图像不被挤压？另外，我怎么能移动图像的背景？

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

score 5 · Accepted Answer

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

HTML

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

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

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

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

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

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

score 1 · Accepted Answer

1

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

于 2012-04-06T01:34:40.527 回答

score 0 · Accepted Answer

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

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