ขนาดรูปภาพใน HTML หมายถึงความสูงและความกว้างของรูปภาพ ถูกกำหนดเป็น HTML attributes บนเอลิเมนต์ <img> นี่คือวิธีการตั้งค่า
ไวยากรณ์
ไวยากรณ์สำหรับตั้งค่าแอตทริบิวต์ width และ height ของแท็ก <img> คือ:
<img src="<name of website>" alt="<alt tag>" height="<in px>" width="<in px>" />
ตัวอย่างโค้ดแสดงการทำงาน:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Image Size in HTML</h1> <h2>without attributes</h2> <img src="https://placekitten.com/500/500" /> <h2>with attributes</h2> <img src="https://placekitten.com/500/500" width="300" height="300" /> <script src="script.js"></script> </body> </html>
ความสูงและความกว้างของ <img> เป็นตัวเลขในพิกเซล (ในเครื่องหมายคำพูด) ควรระบุทั้ง height และ width เพื่อจัดสรรพื้นที่ก่อนโหลดหน้าเว็บ หากไม่ระบุขนาดก่อน render หน้าจะปรับ layout ขณะรูปโหลด
Browser Support
แอตทริบิวต์ width และ height ของ <img> รองรับในทุกเบราว์เซอร์
