กำกับศิลป์

Katie Hempenius

ลองใช้เดโมนี้

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

เกิดอะไรขึ้น

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

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

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

ดูโค้ด

• ดู index.html เพื่อดูโค้ดการกำกับศิลป์สำหรับเดโมนี้

วิธีการทํางานของรหัส

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

picture

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

source

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

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

img

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

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