การกำกับศิลป์

Katie Hempenius
Katie Hempenius

ลองใช้การสาธิตนี้

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ เต็มหน้าจอ
  • โหลดแอปซ้ำโดยใช้เบราว์เซอร์ขนาดต่างๆ สังเกตว่ารูปภาพต่างกัน ขนาดต่างๆ ไม่ใช่แค่ขนาดต่างๆ เท่านั้น แต่ยังมีการครอบตัดและ ในอัตราส่วนกว้างยาว

ทำไมจึงเป็นเช่นนั้น

การกำกับศิลป์ แสดงรูปภาพที่แตกต่างกันในขนาดการแสดงผลที่แตกต่างกัน

รูปภาพที่ตอบสนองตามอุปกรณ์จะโหลดรูปภาพเดียวกันในขนาดต่างๆ เส้นทางศิลปะ ขั้นตอนนี้เพิ่มเติม และโหลดรูปภาพที่แตกต่างกันโดยสิ้นเชิง จอแสดงผล

ใช้ทิศทางศิลปะเพื่อปรับปรุงการนำเสนอภาพ ตัวอย่างเช่น การครอบตัดรูปภาพในการสาธิตนี้ช่วยให้แน่ใจว่าจุดสนใจ (ดอกไม้) คือ แสดงรายละเอียดเสมอโดยไม่คำนึงถึงจอแสดงผล ประโยชน์ของการกำกับศิลป์คือ เพื่อความสวยงามเท่านั้น รูปภาพที่ตอบสนองตามอุปกรณ์ไม่ได้ให้ประโยชน์ด้านประสิทธิภาพใดๆ

ดูโค้ด

  • ดู index.html เพื่อดูรหัสทิศทางศิลปะสำหรับการสาธิตนี้

วิธีการทำงานของโค้ด

การกำกับศิลป์ใช้ <picture> <source>, และ <img>

รูปภาพ

แท็ก <picture> มี Wrapper สําหรับแท็ก <source> อย่างน้อย 1 รายการ และแท็ก <image> 1 แท็ก

แหล่งที่มา

แท็ก <source> ระบุทรัพยากรสื่อ

เบราว์เซอร์ใช้แท็ก <source> แรกกับการค้นหาสื่อ ที่แสดงเป็น "จริง" ถ้าคิวรี่สื่อไม่มีที่ตรงกัน เบราว์เซอร์จะกลับไปโหลดรูปภาพที่ <img> ระบุ แท็กปิ

img

แท็ก <img> ทำให้โค้ดนี้ทำงานได้ในเบราว์เซอร์ที่ไม่ รองรับแท็ก <picture>

หากเบราว์เซอร์ไม่รองรับแท็ก <picture> เบราว์เซอร์จะโหลด รูปภาพที่ระบุโดยแท็ก <img>