ขนาดรูปภาพ HTML หมายถึงความสูงและความกว้างของรูปภาพ มีการระบุไว้เป็นแอตทริบิวต์ HTML ใน องค์ประกอบ นี่คือวิธีตั้งค่า
ไวยากรณ์
ไวยากรณ์สำหรับการตั้งค่าแอตทริบิวต์ 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> องค์ประกอบคือตัวเลขเป็นพิกเซล (อยู่ระหว่างเครื่องหมายคำพูด) เป็นความคิดที่ดีที่จะระบุแอตทริบิวต์ทั้งความสูงและความกว้าง เพื่อให้มีการจัดสรรพื้นที่สำหรับรูปภาพก่อนที่หน้าเว็บจะโหลด หากไม่ระบุขนาดของรูปภาพก่อนการแสดงหน้า หน้าจะปรับเลย์เอาต์ของรูปภาพเมื่อโหลดรูปภาพ
รองรับเบราว์เซอร์
แอตทริบิวต์ความกว้างและความสูงของ <img> องค์ประกอบได้รับการสนับสนุนบนเว็บเบราว์เซอร์ทั้งหมด
