Teil des Bildes (Teilbild im Bildstreifen) anzeigen, ohne es zu zerquetschen?

Question

Ich habe ein Bild auf einer Webseite. Es ist jedoch ein ziemlich großes Bild. Es ist 6144 * 768. In Wirklichkeit ist es eine Serie von 6 Bildern, die zusammen musiziert werden.

Ich habe gelesen, dass es besser ist, dieses eine Bild zu laden, anstatt 6 Bilder zu laden. Ich habe festgestellt, dass dies auch wahr ist, als ich Tabellen und CSS verwendete.

Wenn ich dieses Bild jedoch als Quelle eines Bildelements einstelle und die Größe des Bildelements auf 1024 * 768 festlege, wird das Bild gequetscht. Nein!

Wie kann ich dieses Bild nicht mit nur Javascript beschädigt werden? Wie könnte ich den Hintergrund des Bildes verschieben?

[Beispiel: Stellen Sie sich einen wirklich langen Papierstreifen vor. Legen Sie dann ein kleines ausgeschnittenes Rechteck aus Papier über den Streifen auf dem Papierstreifen, so dass Sie nur den Teil des Streifens sehen können, der sich innerhalb des Rechtecks ​​befindet. Das möchte ich tun]

Answer 1

Platzieren Sie das Bild in einem Containerelement, und legen Sie den Überlauf mithilfe von CSS ausgeblendet fest. Lassen Sie das Bild, wie es ist, und es wird nicht

HTML

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

CSS

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

dann die Bild Verwendung negative Werte zerquetscht werden bewegen für den CSS-Stil margin-left.

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

Sie können dies mit jQuery tun wie folgt

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

Answer 2

Skalieren Sie Ihr Bild nicht mit CSS; stattdessen es in einem Wrapper div setzen und in Ihrem CSS etwas tun:

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

Answer 3

Was OP sucht ist CSS Sprites (auch A List Apart oder Smashingmag sehen).