แท็ก img
แท็ก img สร้างรูปภาพ เส้นทางไปยังรูปภาพ
ถูกระบุในแอตทริบิวต์ src ไม่ต้องการ
แท็กปิด
แอตทริบิวต์
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
src |
กำหนดเส้นทางไปยังรูปภาพ
แอตทริบิวต์บังคับ |
alt |
ข้อความทางเลือกที่จะแสดงแทนรูปภาพ
หากไม่พบรูปภาพ (เช่น ระบุเส้นทางผิด)
แอตทริบิวต์บังคับ หากไม่มี validator (โปรแกรมที่ตรวจสอบ ความถูกต้องของ HTML หรือ CSS) จะแจ้งเตือน |
width |
ความกว้างของรูปภาพ เป็นพิกเซล (ในกรณีนี้ไม่ต้องระบุหน่วย) หรือเปอร์เซ็นต์ขององค์ประกอบแม่ของรูปภาพ |
height |
ความสูงของรูปภาพ เป็นพิกเซล (ในกรณีนี้ไม่ต้องระบุหน่วย) หรือเปอร์เซ็นต์ขององค์ประกอบแม่ของรูปภาพ |
รายละเอียดปลีกย่อย
หากไม่ได้กำหนดทั้งความกว้างและ ความสูงให้รูปภาพ - รูปภาพจะมีขนาดจริง ของมัน หากกำหนดความสูง - รูปภาพจะมี ความสูงตามที่กำหนด ส่วนความกว้างจะปรับ ตามสัดส่วนเพื่อไม่ให้บิดเบี้ยว
หากกำหนดเฉพาะความกว้าง - เช่นเดียวกัน รูปภาพ จะปรับความสูงตามเพื่อรักษา สัดส่วน
หากกำหนดทั้งความกว้างและความสูง - สัดส่วน ของรูปภาพอาจบิดเบี้ยวได้ (หรืออาจไม่ ขึ้นอยู่กับความแม่นยำในการกำหนด) หากความกว้างหรือความสูง (หรือ ทั้งสองอย่าง) มากกว่าความจริง - รูปภาพจะขยายใหญ่ขึ้น แต่คุณภาพจะลดลง
แนะนำให้กำหนดความกว้างและความสูง ให้รูปภาพในแอตทริบิวต์ (แทนที่จะกำหนดผ่าน CSS) - ในกรณีนี้เบราว์เซอร์จะโหลด รูปภาพได้เร็วขึ้น - มันไม่จำเป็นต้องคำนวณขนาด ของแต่ละรูปภาพหลังจากได้รับมันมา
ไม่แนะนำให้ลดขนาดจริง
ของรูปภาพโดยไม่จำเป็น ตัวอย่างเช่น
ขนาดจริงของรูปภาพคือ 1000 คูณ 1000
พิกเซล แต่คุณกำหนดความกว้างให้ 100px
ในกรณีนี้รูปภาพบนหน้าจอจะแสดงผล
ที่ 100 พิกเซล แต่มีขนาดไฟล์
เต็มหนึ่งพันพิกเซล ดังนั้นจึงโหลด
ช้ากว่ามาก
ตัวอย่าง
ลองเพิ่มรูปภาพลงในเว็บไซต์และอย่า
กำหนดแอตทริบิวต์ height และ width
รูปภาพจะมีขนาดจริงของมัน:
<img src="monkey.png" alt="ลิง">
:
ตัวอย่าง
ลองเพิ่มความกว้างให้รูปภาพ
โดยใช้แอตทริบิวต์ width ความสูง
จะต้องปรับตามเพื่อรักษา
สัดส่วนของรูปภาพ:
<img src="monkey.png" width="200" alt="ลิง">
:
ตัวอย่าง
คราวนี้ลองเพิ่มความสูงให้รูปภาพ
โดยใช้แอตทริบิวต์ height ความกว้าง
จะปรับตามเพื่อรักษา
สัดส่วนของรูปภาพ:
<img src="monkey.png" height="100" alt="ลิง">
:
ตัวอย่าง
ลองเพิ่มทั้งความสูง และความกว้างให้รูปภาพพร้อมกัน สัดส่วนของรูปภาพจะ บิดเบี้ยว (ไม่เสมอไป แต่ในกรณีนี้ ความสูงและความกว้างถูกเลือกมาให้ สัดส่วนบิดเบี้ยว):
<img src="monkey.png" height="100" width="300" alt="ลิง">
:
ตัวอย่าง
ลองกำหนดเส้นทางไปยังรูปภาพที่ผิด
(เพื่อให้ง่ายเราจะปล่อยให้ว่างเปล่า) แทนที่
รูปภาพเราจะเห็นเนื้อหาของแอตทริบิวต์ alt
(ดูเหมือนข้อความธรรมดา - แต่ลอง
คัดลอกมันดู - คุณจะทำไม่ได้
มันจะถูกดึงเหมือนรูปภาพ):
<img src="" alt="ลิง">
:
ดูเพิ่มเติม
-
คุณสมบัติ
width,
ซึ่งกำหนดความกว้างขององค์ประกอบ -
คุณสมบัติ
height,
ซึ่งกำหนดความสูงขององค์ประกอบ -
แท็ก
figure,
ซึ่งจัดกลุ่มรูปภาพและคำบรรยาย -
แท็ก
figcaption,
ซึ่งกำหนดคำบรรยายให้รูปภาพ -
คุณสมบัติ
background-image,
ซึ่งกำหนดรูปภาพพื้นหลัง
