الاتجاه الفني

Katie Hempenius

جرِّب هذا الإصدار التجريبي

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة
• أعد تحميل التطبيق باستخدام أحجام المتصفح المختلفة. لاحظ ما مدى اختلاف الصور هي ليست بأحجام مختلفة فحسب، بل تشمل أيضًا اقتصاصات نِسب العرض إلى الارتفاع:

ما الذي يحدث هنا؟

اتجاه الأعمال الفنية تعرض صورًا مختلفة على أحجام عرض مختلفة.

صورة سريعة الاستجابة تحمّل أحجامًا مختلفة لنفس الصورة. الاتجاه الفني يتطلب هذه الخطوة إلى الأمام وتحميل صور مختلفة تمامًا استنادًا إلى العرض.

استخدم الاتجاه الفني لتحسين العرض التقديمي المرئي. على سبيل المثال، تختلف من خلال اقتصاص الصور في هذا العرض التوضيحي، يضمن ذلك أنّ نقطة الاهتمام (الزهرة) دائمًا بالتفصيل، بغض النظر عن الشاشة. مزايا الاتجاه الفني هي جمالية بحتة ولا تقدم أي فائدة لأداء الصور سريعة الاستجابة.

عرض الرمز

• يمكنك الاطّلاع على index.html للاطّلاع على رمز اتجاه العمل الفني لهذا العرض التوضيحي.

طريقة عمل الرمز

يستخدم الاتجاه الفني <picture>، <source>، و<img>.

صورة

توفّر العلامة <picture> برنامج تضمين لعلامة <source> صفر أو أكثر وعلامة <image> واحدة.

المصدر

تحدّد العلامة <source> مورد وسائط.

يستخدم المتصفّح أول علامة <source> مع طلب بحث عن الوسائط. التي تُرجع القيمة true. وإذا لم يتطابق أي من الاستعلامات عن الوسائط، فسيتم يعود المتصفّح لتحميل الصورة التي حدَّدتها السمة <img>. .

img

تجعل العلامة <img> هذا الرمز يعمل على المتصفّحات غير المتوافقة تتيح استخدام العلامة <picture>

إذا لم يكن المتصفّح متوافقًا مع العلامة <picture>، سيتم تحميل الصورة المحددة بواسطة العلامة <img>.