ขนาดของภาพที่แสดงในเบราว์เซอร์อาจไม่ใช่ความสูงและความกว้างที่แท้จริง ตัวอย่างเช่นด้านล่างเราจะเพิ่มรูปแบบความกว้างและความสูงให้กับมัน
<img src = "ie.png">
สิ่งนี้แสดงขนาดในเบราว์เซอร์เป็น 25px แล้วเราจะได้ภาพขนาดจริงได้อย่างไร? รหัสต่อไปนี้ใช้ฟังก์ชันนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
</head>
<body>
<img src = "ie.png" id = "image">
<script>
// ตั้งค่าความล่าช้าเพื่อให้แน่ใจว่าการโหลดภาพเสร็จสมบูรณ์
settimeout (function () {
วาจา
real_width
real_height
_im = document.getElementById ('รูปภาพ')
im = document.createElement ('img');
im.src = _im.src
real_width = im.width,
real_height = im.height;
การแจ้งเตือน (real_width+'/n'+real_height);
}, 500);
</script>
</body>
</html>
หมายเหตุ: ฉันได้ทดสอบรหัสด้านบนใน IE7+ และ Chrome เพราะฉันไม่สามารถทดสอบได้เพราะไม่ได้ติดตั้ง IE6
รหัสที่มีประโยชน์มากฉันใช้มันในโครงการส่วนใหญ่โปรดใช้มัน