javascript - 画像の一部 (画像ストリップのサブ画像) をつぶさずに表示しますか?

Question

Webページに画像があります。とはいえ、かなり大きいイメージです。6144*768 です。実際には、6枚の画像をくっつけたものです。

6 つの画像を読み込むよりも、この 1 つの画像を読み込む方がよい方法であると読みました。テーブルと 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 style に負の値を使用しますmargin-left。

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

次のようにjQueryでこれを行うことができます

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

score 1 · Accepted Answer

OP が探しているのはCSS スプライトです ( A List ApartまたはSmashingmagも参照してください)。

score 0 · Accepted Answer

CSS で画像をスケーリングしないでください。代わりに、それをラッパー div に入れて、CSS で次のようにします。

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