جرِّب هذا العرض التوضيحي
لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة
.عليك إعادة تحميل التطبيق في نوافذ المتصفح ذات الأحجام المختلفة لمشاهدة تحميل المتصفح لصور مختلفة واستخدام تنسيقات مختلفة بأحجام مختلفة في المتصفح.
عرض الرمز
- يمكنك الاطّلاع على
index.htmlلمعرفة الرمز المناسب الذي يؤدي إلى تنفيذ هذا الإجراء:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
ما الذي يحدث هنا؟
تحدّد قيمة السمة sizes أنّ عرض الصورة سيكون:
" 100% من عرض إطار العرض" في إطارات العرض التي يصل عرضها إلى 480 بكسل، و" 50% من عرض
إطار العرض" على الشاشات التي يتراوح عرضها بين 481 و1024 بكسل، و800 بكسل على الشاشات الأكبر من 1024 بكسل. وتتطابق طرق العرض هذه مع العروض المحددة في CSS.
تساعد إمكانية تحديد عرض فتحات متعددة في استيعاب تنسيقات الصفحة التي تستخدم نمطًا مختلفًا (أي عروض الصور) مع أحجام إطار عرض مختلفة.
كيفية تحديد قيم عرض خانات متعددة
- استخدِم قائمة مفصولة بفواصل لتحديد عمليات عرض عدّة خانات. يتألف كل عنصر من عناصر القائمة،
باستثناء العنصر الأخير، من حالة وسائط (مثل
max-widthأوmin-width) وعرض فتحة. - العنصر الأخير في هذه القائمة هو عرض الخانة التلقائي. هذا هو الإعداد الافتراضي، لذا لن تحتاج إلى تحديد حالة وسائط.
- يمكنك إدراج أي عدد تريده من عروض الشرائح، ولا يهم عدد الصور المدرَجة في
srcset. يمكن تحديد عرض الفتحة باستخدام مجموعة متنوعة من الوحدات. فيما يلي جميع عروض العرض الصالحة:
100px33vw20emcalc(50vw-10px)
العرض التالي غير صالح:
25%(لا يمكن استخدام النسب المئوية مع سمة المقاسات)