เนื้อหา

• ขั้นตอน
• เคล็ดลับ

บทความนี้จะแสดงวิธีกำหนดความสูงและความกว้างของรูปภาพใน HTML

• แอตทริบิวต์ "ความกว้าง" กำหนดความกว้างของรูปภาพ (เป็นพิกเซล)
• แอตทริบิวต์ "ความสูง" กำหนดความสูงของภาพ (เป็นพิกเซล)
• ใน HTML4.01 ความสูงสามารถกำหนดเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ แต่ใน HTML5 จะกำหนดเป็นพิกเซลเท่านั้น

ขั้นตอน

1. 1 เปิดไฟล์ HTML ตัวอย่างเช่น เปิดไฟล์ default.html
2. 2 เพิ่มบรรทัดต่อไปนี้ในโค้ด HTML ของคุณ
   • img src = "imagefile.webp" alt = "รูปภาพ" ความสูง = "42" width = "42">
   • src มีเส้นทางไปยังไฟล์กราฟิก (รูปภาพ)
   • ใน alt ขนาดของภาพจะถูกกำหนด
3. 3 แทนที่ค่าของแอตทริบิวต์ความสูงและความกว้างด้วยค่าที่คุณต้องการ ตัวอย่างเช่น ความสูง = "19" width = "20"
4. 4 บันทึกไฟล์และเปิดในเว็บเบราว์เซอร์ใดก็ได้ ทำเช่นนี้เพื่อตรวจสอบวิธีการปรับขนาดรูปภาพ แอตทริบิวต์ "ความกว้าง" รองรับเบราว์เซอร์หลักทั้งหมด (Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer)

เคล็ดลับ

• กำหนดความสูงและความกว้างของรูปภาพเสมอ ดังนั้นเมื่อโหลดหน้าแล้ว พื้นที่จะสงวนไว้สำหรับรูปภาพ มิฉะนั้น เบราว์เซอร์จะไม่ทราบขนาดของรูปภาพและจะไม่สำรองพื้นที่ ทำให้เค้าโครงหน้าเปลี่ยนไปเมื่อโหลดหน้า
• หากขนาดของรูปภาพใหญ่ลดลงโดยใช้แอตทริบิวต์ "ความสูง" และ "ความกว้าง" ผู้ใช้จะโหลดรูปภาพขนาดใหญ่ (แม้ว่าจะดูเล็กบนหน้าก็ตาม) ดังนั้น เราขอแนะนำให้คุณปรับขนาดรูปภาพในโปรแกรมแก้ไขกราฟิกก่อน