การตั้งค่าแอตทริบิวต์ 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">