แท็ก <img>

การตั้งค่าแอตทริบิวต์ width และ height ในแท็ก <img> จะช่วยป้องกันการเปลี่ยนเลย์เอาต์ ข้อมูลนี้ช่วยให้เบราว์เซอร์สามารถจองพื้นที่สำหรับรูปภาพได้อย่างถูกต้อง

  • ตั้งค่าแอตทริบิวต์ width และ height: ค่าของแอตทริบิวต์เหล่านี้ควรตั้งค่าให้ตรงกับขนาดของรูปภาพ (ซึ่งก็คือขนาดภายใน) ไม่ใช่ขนาดที่จะแสดงรูปภาพ

  • ปรับการจัดรูปแบบรูปภาพตามความจำเป็น: การเพิ่มแอตทริบิวต์ width และ height อาจทำให้รูปภาพแสดงผลแตกต่างกัน ทั้งนี้ขึ้นอยู่กับการจัดรูปแบบที่มีอยู่ของรูปภาพ ในหลายๆ กรณี ปัญหานี้แก้ไขได้ด้วยการเพิ่ม height: auto หรือ width: auto ลงในการจัดรูปแบบที่มีอยู่

การจัดรูปแบบ CSS ก่อนหน้า เปลี่ยนเป็น
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">