HTML <รูปภาพ>แท็ก
ตัวอย่าง
วิธีใช้แท็ก <รูปภาพ>:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
ความหมายและการใช้งาน
แท็ ก<picture>ช่วยให้นักพัฒนาเว็บมีความยืดหยุ่นมากขึ้นในการระบุทรัพยากรภาพ
การใช้งาน<picture>องค์ประกอบส่วนใหญ่จะเป็นทิศทางศิลปะในการออกแบบที่ตอบสนอง แทนที่จะมีรูปภาพเดียวที่ปรับขนาดขึ้นหรือลงตามความกว้างของวิวพอร์ต เราสามารถออกแบบรูปภาพหลายภาพเพื่อเติมเต็มวิวพอร์ตของเบราว์เซอร์ได้อย่างสวยงามยิ่งขึ้น
องค์ประกอบ<picture>ประกอบด้วยสองแท็ก: แท็ก
<source>หนึ่งแท็กขึ้นไปและแท็ก<img> หนึ่ง แท็ก
เบราว์เซอร์จะค้นหาองค์ประกอบ <source> แรกที่การสืบค้นสื่อตรงกับความกว้างของวิวพอร์ตปัจจุบัน จากนั้นจะแสดงภาพที่เหมาะสม (ระบุในแอตทริบิวต์ srcset) <img> องค์ประกอบเป็นสิ่งจำเป็นในฐานะลูกคนสุดท้ายของ<picture>องค์ประกอบ เป็นตัวเลือกทางเลือกหากไม่มีแท็กต้นทางที่ตรงกัน
เคล็ดลับ:องค์ประกอบ<picture>ทำงาน "คล้ายกัน" กับ <video> และ <audio> คุณตั้งค่าแหล่งที่มาต่างๆ กัน และแหล่งแรกที่เหมาะกับการกำหนดลักษณะคือแหล่งที่ใช้
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนองค์ประกอบอย่างสมบูรณ์
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
คุณสมบัติสากล
แท็ ก<picture>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<picture>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
หน้าที่เกี่ยวข้อง
บทช่วยสอน HTML: HTML <รูปภาพ> องค์ประกอบ
บทช่วยสอน CSS: การออกแบบที่ตอบสนองต่อ CSS - รูปภาพ