ลองใช้การสาธิตนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- โหลดแอปซ้ำโดยใช้เบราว์เซอร์ขนาดอื่น สังเกตดูว่ารูปภาพแตกต่างกันอย่างไร ไม่เพียงแค่ขนาดต่างๆ เท่านั้น แต่ยังมีการครอบตัดและสัดส่วนภาพต่างกันด้วย
เกิดอะไรขึ้น
ทิศทางศิลปะ แสดงรูปภาพที่แตกต่างกันบนจอแสดงผลขนาดต่างๆ
รูปภาพที่ตอบสนองตามอุปกรณ์จะโหลดรูปภาพเดียวกันในขนาดต่างๆ การกำกับศิลป์ก้าวไปอีกขั้นและโหลดรูปภาพที่แตกต่างกันโดยสิ้นเชิงโดยขึ้นอยู่กับจอแสดงผล
ใช้การกำหนดทิศทางศิลปะเพื่อปรับปรุงการนำเสนอภาพ เช่น การครอบตัดรูปภาพต่างๆ ในเดโมนี้ช่วยให้มั่นใจได้ว่าจุดสนใจ (ดอกไม้) จะแสดงในรายละเอียดเสมอ โดยไม่คำนึงถึงจอแสดงผล ข้อดีของการกำหนดทิศทางศิลปะคือ สุนทรียภาพเพียงอย่างเดียว โดยไม่ได้ให้ประโยชน์ด้านประสิทธิภาพใดมากกว่ารูปภาพที่ตอบสนองตามอุปกรณ์
ดูโค้ด
- ดู
index.htmlเพื่อดูรหัสทิศทางศิลปะของการสาธิตนี้
วิธีการทำงานของโค้ด
การกำกับศิลป์ใช้แท็ก
<picture>,
<source>
และ <img>
ภาพ
แท็ก <picture> มี Wrapper สำหรับแท็ก <source> ตั้งแต่ 0 แท็กขึ้นไปและแท็ก <image> 1 แท็ก
แหล่งที่มา
แท็ก <source> ระบุทรัพยากรสื่อ
เบราว์เซอร์จะใช้แท็ก <source> แรกที่มีคำค้นหาสื่อที่แสดงผลเป็น "จริง" หากไม่มีคำค้นหาสื่อที่ตรงกันเลย เบราว์เซอร์จะกลับไปโหลดรูปภาพที่ระบุโดย <img>
แบบไม่ต้องเว้นวรรค
img
แท็ก <img> ทําให้โค้ดนี้ใช้งานได้ในเบราว์เซอร์ที่ไม่รองรับแท็ก <picture>
หากเบราว์เซอร์ไม่รองรับแท็ก <picture> เบราว์เซอร์จะโหลดรูปภาพที่ระบุโดยแท็ก <img>