A menudo se encuentra el problema de que las imágenes se deforman después de ser cargadas a través del fondo. Si su estilo de sitio web es adecuado, puede usar este método para diseñar la página, admitiendo cualquier tamaño de deslizamiento de imágenes (arriba, abajo, izquierda y derecha)
<! DocType html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> diapositiva de cualquier tamaño </title> <style> div {margen: 0 autocon; Overflow: Hidden;}. Main {ancho: 1000px;}. Divmg_div1 {ancho: 380px; float: izquierda;}. divmg .div4_title {ancho: 380px; Altura: 103px; Color de fondo: #EDB205; Color: #fff; Font-Family: "Microsoft Yahei"; tamaño de fuente: 22px; Font-Weight: Bold; Línea de altura: 90px; Text-Align: Center; espaciado de letras: 5px;}. divimg_img1 {ancho: 380px; Altura: 414px; margen-top: 5px; Color de fondo: #fff; posición: relativa;}. divimg_div2 {ancho: 615px; float: right;}. divimg_img2 {ancho: 194px; Altura: 256px; flotante: izquierda; Color de fondo: #fff; posición: relativa;}. divimg_img3 {ancho: 417px; Altura: 256px; flotante: correcto; Color de fondo: #fff; posición: relativa;}. divimg_img4 {ancho: 366px; Altura: 262px; flotante: izquierda; margen-top: 4px; Color de fondo: #fff; posición: relativa;}. divimg_img5 {ancho: 245px; Altura: 262px; flotante: correcto; margen-top: 4px; Color de fondo: #fff; posición: relativa;}. divimg .gif {posición: absoluto; Izquierda: 50%; arriba: 50%; margen -izquierda: -50px; margen -top: -50px; Z-índice: 2;}. divimg .img {posición: absoluto; índice z: 1; Izquierda: 0; arriba: 0; visualización: ninguno;} </style> <script src = "js/jQuery-1.10.2.min.js"> </script> <script> $ (documento) .Ready (function (e) {$ (". divimg.img"). Load (function () {var w = parseint ($ (this) .width ()); var h = parseint ($ (this).); hh = $ (this) .parent (). Height (); var ww = $ (this) .parent (). width (); var blw = w/parseInt (ww); var blh = h/parseint (hh); función izquierda () {$ (this) .Animate ({izquierda :-( parseInt (parseInt (hh)/h*w)-(parseInt (ww)))}, 10000, derecha)} función right () {$ (this) .animate ({izquierda: 0}, 10000, izquierda);} top () {$ (this) .animate ({top :-( parseInt (parseInt (ww)/w*h)-(parseInt (hh)))}, 10000, fondo);} function bottom () {$ (this) .animate ({top: 0}, 10000, arriba);} if (blw> blh) {$ (this) .Height (HH) .Width (parseInt (parseInt (hh)/h*w)); $ (this) .prev (). hide (); $ (this) .animate ({izquierda :-( parseInt (parseInt (hh)/h*w)-(parseInt (ww)))}, 10000, derecha);} else if (blw < blh) {$ (this) .Height (parseInt (parseInt (ww)/w*h)). width (ww); $ (this) .prev (). hide (); $ (this) .css ({"z-index": "3", "di) splay ":" bloque "}); $ (this) .animate ({top :-( parseInt (parseInt (ww)/w*h)-(parseInt (hh)))}, 10000, fondo);}}); $ (". Div4 .img "). Cada (función (index, elemento) {$ (this) .attr (" src ", $ (this) .attr (" nombre "));});}); </script> </head> <body> <div> <div> <div> <div> diapositiva de cualquier tamaño </div> <div> <img src = "images/loadding.gif"/> <img name = "Images/am_bigimg01.jpg" src = ""/> </div> </div> <div> <iv> <iv> <iMg src = "imágenes/" dding.dding. name = "Images/am_nyimg01.jpg" src = ""/> </div> <div> <img src = "images/loadding.gif"/> <img name = "Images/am_img02.jpg" src = ""/> </div> <div> <img src = "images/loadding.gif"/> <img <img name = "Images/am_newimg01.jpg" src = ""/> </div> <div> <img src = "images/loadding.gif"/> <img name = "Images/am_rynewimg03.jpg" src = ""/> </div> </div> </div> </iv> </body> <html>