Rencontrez souvent le problème que les images sont déformées après avoir été téléchargées à travers l'arrière-plan. Si le style de votre site Web convient, vous pouvez utiliser cette méthode pour disposer la page, en soutenant toute taille de glissement de l'image (en haut, en bas, à gauche et à droite)
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> diapositive de toute taille </tapie> <style> div {margin: 0 auto; Overflow: Hidden;}. Main {width: 1000px;}. divmg_div1 {width: 380px; float: gauche;}. divmg .div4_title {width: 380px; hauteur: 103px; Color d'arrière-plan: # EDB205; Couleur: #FFF; Font-Family: "Microsoft Yahei"; taille de police: 22px; Police-poids: Bold; hauteur de ligne: 90px; Texte-aligne: Centre; Espacement des lettres: 5px;}. divimg_img1 {largeur: 380px; hauteur: 414px; marge: 5px; Color d'arrière-plan: #FFF; Position: relative;}. divimg_div2 {largeur: 615px; float: à droite;}. divimg_img2 {width: 194px; hauteur: 256px; flottant: à gauche; Color d'arrière-plan: #FFF; Position: relative;}. divimg_img3 {largeur: 417px; hauteur: 256px; flottant: à droite; Color d'arrière-plan: #FFF; Position: relative;}. divimg_img4 {width: 366px; hauteur: 262px; flottant: à gauche; marge: 4px; Color d'arrière-plan: #FFF; Position: relative;}. divimg_img5 {largeur: 245px; hauteur: 262px; flottant: à droite; marge: 4px; Color d'arrière-plan: #FFF; Position: relative;}. divimg .gif {position: absolue; Gauche: 50%; en haut: 50%; marge-gauche: -50px; marge: -50px; z-index: 2;}. divimg .img {position: absolu; Z-Index: 1; à gauche: 0; en haut: 0; Affichage: Aucun;} </ style> <script src = "js / jQuery-1.10.2.min.js"> </script> <priss> $ (document) .ready (function (e) {$ (". divimg.img"). Load (function () {var w = parseInt (this). hh = $ (this) .parent (). height (); var ww = $ (this) .parent (). width (); var blw = w / parseInt (ww); var blh = h / parseInt (hh); fonction Left () {$ (this) .animate ({Left :-( paSeInt (parseInt (hh) / h * w) - (parseInt (ww)))}, 10000, droite)} fonction droite () {$ (this) .animate ({gauche: 0}, 10000, gauche);} fonction top () {$ (this) .animate ({top :-( paSeInt (parseInt (ww) / w * h) - (parseInt (hh)))}, 10000, en bas);} fonction inférieur () {$ (this) .animate ({top: 0}, 10000, top);} if (blw> blh) {$ (this) .height (hh) .width (parseInt (parseInt (hh) / h * w)); $ (this) .prev (). hide (); $ (this) .animate ({gauche :-( paSeInt (parseInt (hh) / h * w) - (parseInt (ww)))}, 10000, à droite);} else if (blw < blh) {$ (this) .height (parseInt (parseInt (ww) / w * h)). largeur (ww); $ (this) .prev (). hide (); $ (this) .css ({"z-index": "3", "di Splay ":" Block "}); $ (this) .animate ({top :-( paSeInt (parseInt (ww) / w * h) - (parseInt (hh)))}, 10000, en bas);}}); $ (". div4 .img "). Chaque (fonction (index, élément) {$ (this) .attr (" src ", $ (this) .attr (" name "));});}); </ script> </ head> <body> <div> <div> <div> <div> diapositive de toute taille </ div> <div> <img src = "images / loshing.gif" /> <img name = "images / am_bigimg01.jpg" src = "" /> </v> </v> <v> <div> <img src = "images / loss / loss name = "images / am_nyimg01.jpg" src = "" /> </ div> <div> <img src = "images / loshing.gif" /> <img name = "images / am_img02.jpg" src = "" /> </ div> <div> <img src = "images / chargeding.gif" /> <img name = "images / am_newimg01.jpg" src = "" /> </ div> <div> <img src = "images / loshing.gif" /> <img name = "images / am_rynewimg03.jpg" src = "" /> </v> </v> </v> </v> </gody> </ html>