แอตทริบิวต์ width
แอตทริบิวต์ width กำหนดความกว้างของรูปภาพ
ที่ระบุโดย แท็ก
img
ปัจจุบันอนุญาตให้ใช้แอตทริบิวต์นี้
ได้กับเฉพาะ รูปภาพ,
iframe,
video
และแท็กอื่น ๆ บางเท่านั้น
อนุญาตให้ระบุค่าเป็นพิกเซล หรือเปอร์เซ็นต์ ในกรณีที่กำหนดขนาดเป็น เปอร์เซ็นต์ จะนำมาจากความกว้างขององค์ประกอบแม่ ในกรณีที่กำหนดขนาดเป็นพิกเซล จะไม่ระบุ หน่วยวัด
หากไม่ได้กำหนดทั้งความกว้าง และความสูงสำหรับรูปภาพ - รูปภาพจะแสดงด้วย ขนาดจริงของมัน หากกำหนดความสูง - รูปภาพจะมีความสูงตามที่กำหนด ส่วนความกว้าง จะปรับตามเพื่อให้สัดส่วนไม่บิดเบี้ยว หากกำหนดเฉพาะความกว้าง - ในทำนองเดียวกัน รูปภาพจะปรับความสูง เพื่อรักษาสัดส่วน หากกำหนดทั้ง ความกว้างและความสูง - สัดส่วนของรูปภาพ อาจบิดเบี้ยวได้ (หรืออาจไม่ก็ได้ ขึ้นอยู่กับว่าทายถูกหรือไม่) หากความกว้างหรือความสูง (หรือทั้งคู่) มากกว่า ขนาดจริง - รูปภาพจะขยายใหญ่ขึ้น แต่จะสูญเสีย คุณภาพ
แนะนำให้กำหนดความกว้างและความสูง ให้รูปภาพในแอตทริบิวต์ - ในกรณีนี้เบราว์เซอร์ จะโหลดรูปภาพได้เร็วขึ้น - เพราะไม่ จำเป็นต้องคำนวณขนาดของแต่ละรูปภาพ หลังจากได้รับมันมา
ไม่แนะนำให้ลดขนาดจริง
ของรูปภาพโดยไม่จำเป็น ตัวอย่างเช่น
ขนาดจริงของรูปภาพคือ 1000 คูณ 1000
พิกเซล แต่คุณกำหนดความกว้างเป็น 100px
ในกรณีนี้รูปภาพบนหน้าจอจะแสดงผล
ที่ 100 พิกเซล แต่มีขนาดไฟล์
เต็มหนึ่งพันพิกเซล และดังนั้นจะโหลด
ช้ากว่ามาก
ดูตัวอย่างการทำงานได้ที่:
แท็ก img
