Häufig begegnen das Problem, dass die Bilder nach dem Hochladen über den Hintergrund deformiert werden. Wenn Ihr Website -Stil geeignet ist, können Sie diese Methode verwenden, um die Seite zu layout und unterstützt jede Größe des Bildschiebens (nach oben, unten, links und rechts).
<! DocType html> <html> <kopf> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> Folie einer beliebigen Größe </title> <style> div {Margin: 0 automatisch; Überlauf: versteckt;}. Main {width: 1000px;}. divmg_div1 {width: 380px; float: links;}. divmg .div4_title {width: 380px; Höhe: 103px; Hintergrundfarbe: #edb205; Farbe: #fff; Schriftfamilie: "Microsoft Yahei"; Schriftgröße: 22px; Schriftgewicht: fett; Zeilenhöhe: 90px; Text-Align: Mitte; Buchstabenabteilung: 5px;}. Divimg_img1 {Breite: 380px; Höhe: 414px; Rand: 5px; Hintergrundfarbe: #fff; Position: relativ;}. divimg_div2 {width: 615px; float: rechts;}. divimg_img2 {width: 194px; Höhe: 256px; float: links; Hintergrundfarbe: #fff; Position: relativ;}. divimg_img3 {width: 417px; Höhe: 256px; float: rechts; Hintergrundfarbe: #fff; Position: relativ;}. divimg_img4 {width: 366px; Höhe: 262px; float: links; Rand: 4px; Hintergrundfarbe: #fff; Position: relativ;}. divimg_img5 {width: 245px; Höhe: 262px; float: rechts; Rand: 4px; Hintergrundfarbe: #fff; Position: relativ;}. Divimg .gif {Position: absolut; Links: 50%; Top: 50%; Rand -Links: -50px; Rand: -50px; Z-Index: 2;}. Divimg .img {Position: absolut; Z-Index: 1; links: 0; Top: 0; Anzeige: Keine;} </style> <script src = "js/jQuery-1.10.2.min.js"> </script> $> $ (Dokument) .Ready (Funktion (e) {$ (". DiviMg.img"). Load (function () {var w = pacseint ($) .wid () .Wid ().); HH = $ (this) .Parent (). Höhe (); var ww = $ (this) .Parent (). width (); var blw = w/parseInt (ww); var blh = h/parseInt (hh); Funktion; Funktion; Funktion; Funktion; Funktion; Left () {$ (this) .Amimate ({links :-( ParseInt (ParseInt (HH)/H*W)-(ParseInt (ww))}, 10000, rechts)} Funktion rechts () {$ (this) .Animate ({links: 0}, 10000, links);} Funktion top () {$ (this) .Amimate ({top :-( parseInt (parseInt (ww)/w*h)-(parseInt (hh))}, 10000, boden);} function booth () {$ (this) .Animate ({top: 0}, 10000, top);} if (BLW> Blh) {$ (this) .height (hh) .width (parseInt (parseInt (hh)/h*w)); $ (this) .prev (). hide (); $ (this) .animate ({links :-( ParseInt (ParseInt (HH)/H*W)-(ParseInt (ww)))}, 10000, rechts);} else if (blw < Blh) {$ (this) .height (ParseInt (ParseInt (ww)/w*h)). Breite (ww); $ (this) .prev (). hide (); $ (this) .css ({"Z-Index": "3", "di Splay ":" Block "}); .img "). Jede (Funktion (Index, Element) {$ (this) .attr (" src ", $ (this) .attr (" name "));});}); </script></head><body><div><div><div><div>Slide of any size</div><div> <img src="images/loadding.gif" /> <img name="images/am_bigimg01.jpg" src="" /> </div></div><div><div> <img src="images/loadding.gif" /> <img name = "bilder/am_nyimg01.jpg" src = ""/> </div> <div> <img src = "bilder/loadding.gif"/> <img name = "bilder/am_img02.jpg" src = "/> </> <div> <img Src =" Images/loadding.gif "/> <img> <img Src =" Images/loadding.gif "/> </> <img. name = "bilder/am_newimg01.jpg" src = ""/> </div> <div> <img src = "bilder/loadding.gif"/> <img Name = "Bilder/Am_RYNewimg03.jpg"