เนื้อหา

• ที่จะก้าว
• เคล็ดลับ

บทความวิกิฮาวนี้จะอธิบายวิธีตั้งค่าความสูงและความกว้างของรูปภาพโดยใช้ HTML (HyperText Markup Language)

• "ความกว้าง" ระบุความกว้างของภาพเป็นพิกเซล
• "ความสูง" ระบุความสูงของภาพในหน่วยพิกเซล
• ใน HTML 4.01 สามารถกำหนดความสูงเป็นพิกเซลหรือเปอร์เซ็นต์ได้ ใน HTML5 ค่าต้องเป็นพิกเซล

ที่จะก้าว

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

เคล็ดลับ

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