Seringkali menghadapi masalah bahwa gambar -gambar dideformasi setelah diunggah melalui latar belakang. Jika gaya situs web Anda cocok, Anda dapat menggunakan metode ini untuk tata letak halaman, mendukung segala ukuran geser gambar (atas, bawah, kiri dan kanan)
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <itement> slide dari segala ukuran </iteme> <tyle> div {margin: 0 auto; overflow: tersembunyi;}. main {lebar: 1000px;}. Divmg_div1 {width: 380px; float: left;}. Divmg .div4_title {width: 380px; Tinggi: 103px; Latar Belakang-Color: #EDB205; Warna: #fff; Font-Family: "Microsoft Yahei"; Ukuran font: 22px; font-weight: tebal; Line-Height: 90px; Teks-Align: tengah; spasi surat: 5px;}. Divimg_img1 {lebar: 380px; Tinggi: 414px; margin-top: 5px; Latar Belakang-Color: #FFF; posisi: relatif;}. Divimg_div2 {lebar: 615px; float: right;}. Divimg_img2 {width: 194px; Tinggi: 256px; float: kiri; Latar Belakang-Color: #FFF; posisi: relatif;}. Divimg_img3 {lebar: 417px; Tinggi: 256px; float: benar; Latar Belakang-Color: #FFF; Posisi: relatif;}. Divimg_img4 {lebar: 366px; Tinggi: 262px; float: kiri; margin-top: 4px; Latar Belakang-Color: #FFF; posisi: relatif;}. Divimg_img5 {lebar: 245px; Tinggi: 262px; float: benar; margin-top: 4px; Latar Belakang-Color: #FFF; Posisi: relatif;}. Divimg .gif {position: absolute; Kiri: 50%; Atas: 50%; margin -kiri: -50px; margin -top: -50px; z-index: 2;}. Divimg .img {position: absolute; z-index: 1; Kiri: 0; TOP: 0; Tampilan: tidak ada;} </tyle> <script src = "js/jQuery-1.10.2.min.js"> </script> <script> $ (dokumen) .ready (function (e) {$ (". Divimg.img"). Load (function () {var w = parseInt ($ ($ (ini). hh = $ (ini) .parent (). tinggi (); var ww = $ (ini) .parent (). width (); var blw = w/parseint (ww); var blh = h/parseint (hh); fungsi left () {$ (this) .animate ({left :-( parseInt (parseInt (hh)/h*w)-(parseInt (ww)))}, 10000, kanan)} function right () {$ (this) .animate ({left: 0}, 10000, kiri);} fungsi top () {$ (this) .animate ({top :-( parseInt (parseInt (ww)/w*h)-(parseInt (hh)))}, 10000, bawah);} function bottom () {$ (this) .animate ({top: 0}, 10000, top);} jika (blw> blh) {$ (ini) .Height (hh) .width (parseInt (parseInt (hh)/h*w)); $ (this) .prev (). hide (); $ (ini) .animate ({kiri :-( parseInt (parseInt (hh)/h*w)-(parseInt (ww)))}, 10000, kanan);} lain jika (blw < blh) {$ (this) .height (parseInt (parseInt (ww)/w*h)). width (ww); $ (this) .prev (). hide (); $ (this) .css ({"z-index": "3", "di splay ":" block "}); $ (ini) .animate ({top :-( parseInt (parseInt (ww)/w*h)-(parseInt (hh)))}, 10000, bawah);}}); $ (". Div4 .img "). masing -masing (fungsi (indeks, elemen) {$ (this) .attr (" src ", $ (this) .attr (" name "));});}); </script> </head> <body> <div> <div> <div> <div> Slide dari ukuran apa pun </div> <div> <img src = "gambar/loadding.gif"/> <img name = "gambar/am_bigimg01.jpg" src = ""/</div> </div> </div> <pIf> <"Imging =" IMRES = "" name = "gambar/am_nyimg01.jpg" src = ""/> </div> <div> <img src = "gambar/loadding.gif"/> <img name = "Images/AM_IMG02.JPG" SRC = ""/> </Div> <v> <img src = "gambar/load/load/"/> </Div> <v> <img src = "gambar/Loading/Loading/Load/Load/Load/Load" name = "gambar/am_newimg01.jpg" src = ""/> </div> <veT> <img src = "gambar/loadding.gif"/> <img name = "gambar/am_rynewimg03.jpg" src = ""/> </div> </div> </Div>