جرِّب هذا العرض التوضيحي
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على
ملء الشاشة
. - إعادة تحميل التطبيق باستخدام أحجام مختلفة للمتصفح لاحِظ مدى اختلاف الصور: فهي ليست فقط بأحجام مختلفة، بل أيضًا اقتصاص ونسب عرض إلى ارتفاع مختلفة.
ما الذي يحدث هنا؟
يعرض قسم الاتجاه الفني صورًا مختلفة بأحجام عرض مختلفة.
يتم تحميل أحجام مختلفة للصورة نفسها في الصورة المتجاوبة. ويحسّن الاتجاه الفني هذا المحتوى من خلال تحميل صور مختلفة تمامًا حسب الشاشة.
استخدام الاتجاه الفني لتحسين العرض المرئي. على سبيل المثال، تضمن عمليات اقتصاص الصور المختلفة في هذا العرض التوضيحي إظهار نقطة الاهتمام (الزهرة) بالتفصيل دائمًا، بغض النظر عن الشاشة. فوائد الاتجاه الفني هي جمالية بحتة؛ فهي لا تحقق أي فائدة في الأداء مقارنةً بالصور المتجاوبة مع مختلف الأجهزة.
عرض الرمز
- يمكنك الاطّلاع على
index.htmlللاطّلاع على رمز الاتجاه الفني لهذا العرض التوضيحي.
طريقة عمل الرمز
يستخدم الاتجاه الفني العلامات
<picture>
و<source>
و<img>.
صورة
توفّر العلامة <picture> برنامج تضمين لعلامة <source> صفرًا أو أكثر وعلامة <image> واحدة.
المصدر
تحدّد العلامة <source> مورد وسائط.
يستخدم المتصفّح أول علامة <source> مع استعلام عن وسائط يعرض القيمة "صحيح". وفي حال عدم تطابق أي من طلبات بحث الوسائط، يعود
المتصفح إلى تحميل الصورة التي حدّدتها <img>.
.
img
تجعل العلامة <img> هذا الرمز يعمل على المتصفّحات التي لا تتوافق مع العلامة <picture>.
إذا كان المتصفّح لا يتيح استخدام العلامة <picture>، يتم تحميل الصورة التي حدّدتها العلامة <img>.