JS บริสุทธิ์ใช้ขนาดภาพที่ปรับตัวใน DIV (ทดสอบเข้ากันได้กับ Firefox)

ฟังก์ชั่นที่ใช้โดยรหัสนี้คือเมื่อเราพบว่า DIV เรามักจะมี IMG เมื่อไม่ทราบขนาดภาพ IMG และไม่ทราบขนาด DIV ภาพขนาดปรับตัวจะไม่ถูกประมวลผลเมื่อภาพตัวเองมีขนาดเล็กกว่าขนาดคอนเทนเนอร์ DIV เพราะถ้ายืดออกรูปภาพอาจบิดเบี้ยว

โดยไม่ต้องกังวลใจต่อไปเพียงอัปโหลดรหัสทดสอบเข้ากันได้กับ Firefox, Google, IE6, IE7/8

ต่อไปนี้คือรหัส JS:

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript" language = "JavaScript">

window.onload = function () {

Changeimgsize ();

-

ฟังก์ชั่น 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;

-

อื่นถ้า (m <= 1 && n> = 1)

-

iw = math.ceil (iw/n);

ih = math.ceil (ih/n);

getimg.width = iw;

getimg.height = ih;

-

อื่นถ้า (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;

-

ถ้า (getimg.height <fh)

-

var getdistance = math.floor ((fh-getimg.height)/2);

getimg.style.margintop = getDistance.toString ()+"px";

-

-

</script>

ต่อไปนี้คือรหัส HTML:

การคัดลอกรหัสมีดังนี้:

<div id = "imgcontainer"> <img src = "images/444.jpg"/> </div>

นี่คือรหัส CSS:

การคัดลอกรหัสมีดังนี้:

.sy_pic {Width: 200px; ความสูง: 300px; ชายแดน:#000 Solid 5px; TEXT-ALIGING: CENTRE;}

เปลี่ยนที่อยู่ภาพด้วยตัวเองเพื่อใช้ หากคุณมีคำถามหรือคำแนะนำใด ๆ โปรดเพิ่มกลุ่ม QQ: 255708401