Fungsi yang diimplementasikan oleh kode ini adalah bahwa ketika sebuah div yang biasanya kita temui berisi IMG, ketika ukuran gambar IMG tidak diketahui dan ukuran div tidak diketahui, ukuran gambar secara adaptif tidak diproses ketika gambar itu sendiri lebih kecil dari ukuran wadah div. Karena jika diregangkan, gambar mungkin terdistorsi.
Tanpa basa -basi lagi, cukup unggah kode, diuji, kompatibel dengan Firefox, Google, IE6, IE7/8
Berikut ini adalah kode JS:
Salinan kode adalah sebagai berikut:
<type script = "text/javascript" bahasa = "javascript">
window.onload = function () {
changeImgsize ();
}
function changeImgSize () {
var getContainer = document.getElementById ('imgcontainer');
var getimg = getContainer.getElementsByTagname ('img') [0];
var fw = getContainer.OffsetWidth- (2*getContainer.clientleft);
var fh = getContainer.OffsetHeight- (2*getContainer.clienttop);
var iw = getimg.width;
var ih = getimg.height;
var m = iw/fw;
var n = ih/fh;
if (m> = 1 && n <= 1)
{
IW = Math.ceil (IW/m);
ih = Math.ceil (ih/m);
getimg.width = iw;
getimg.height = ih;
}
lain jika (m <= 1 && n> = 1)
{
IW = Math.ceil (IW/N);
ih = Math.ceil (ih/n);
getimg.width = iw;
getimg.height = ih;
}
lain if (m> = 1 && n> = 1)
{
getmax = math.max (m, n);
IW = Math.ceil (IW/Getmax);
ih = math.ceil (ih/getmax);
getimg.width = iw;
getimg.height = ih;
}
if (getimg.height <fh)
{
var getDistance = math.floor ((fh-getimg.height)/2);
getimg.style.margintop = getDistance.toString ()+"px";
}
}
</script>
Berikut ini adalah kode HTML:
Salinan kode adalah sebagai berikut:
<div id = "imgcontainer"> <img src = "gambar/444.jpg"/> </div>
Ini kode CSS:
Salinan kode adalah sebagai berikut:
.sy_pic {lebar: 200px; Tinggi: 300px; Perbatasan:#000 solid 5px; Teks-Align: tengah;}
Ubah alamat gambar sendiri untuk digunakan. Jika Anda memiliki pertanyaan atau saran, silakan tambahkan grup QQ: 255708401.