يتم غالبًا تنفيذ الصور المتجاوبة مع مختلف الأجهزة
باستخدام السمة
srcset. السمة srcset هي قائمة مفصولة بفواصل تتضمّن أسماء ملفات الصور
وأدوات وصف
العرض أو
الكثافة الخاصة بها.
لمنع متغيّرات التصميم، اضبط السمتَين width وheight على علامتَي <img> و<source> اللتَين تستخدمان srcset.
أدوات وصف الكثافة
لإنشاء صور سريعة الاستجابة تستخدِم واصفات الكثافة:
- يجب أن تكون لجميع الصور المدرَجة في السمتَين
srcوsrcsetنسبة العرض إلى الارتفاع نفسها. - يجب ضبط السمتَين
widthوheightلمطابقة أبعاد صورة1x. - يجب أن تشير السمة
srcإلى صورة1x.
أدوات وصف العرض
لإنشاء صور سريعة الاستجابة تستخدم أدوات وصف العرض:
- يجب أن تكون جميع الصور المُدرَجة في
srcوsrcsetلها نسبة العرض إلى الارتفاع نفسها. - يجب أن تتطابق السمتان
widthوheightمع أبعاد الصورة الاحتياطية. - عدِّل تصميم الصورة حسب الحاجة. بدون CSS، في حال ضبط
widthوheightعلى صورة سريعة الاستجابة تتضمّن أدوات وصف للعرض، سيتم عرض الصورة دائمًا بهذا الحجم المحدَّد. وينطبق ذلك حتى عندما تكون أبعاد الصور الواردة فيsrcsetمتفاوتة. قد لا يكون هذا السلوك هو ما تريده. يمكنك إضافةwidth: 100%; height: auto;أوwidth: 100vw; height: auto;إلى نمط الصورة للحصول على المظهر المرئي الذي تريده.
عناصر الصورة
لإنشاء عناصر <picture> متجاوبة:
- اضبط السمتَين
widthوheightلكل علامات<source>. وتعتمد القيم المناسبة لهذه السمة على كيفية استخدام العلامة<source>للسمةsrcset. - يمكنك تعديل الصورة من خلال تصميم علامة
<img>المقابلة لها. تُعدّ العلامة<source>عنصرًا فارغًا، وبالتالي ليس للنمط أي تأثير. - اضبط السمتَين
widthوheightفي العلامة<img>. ويجب أن تتطابق هذه القيم مع الحجم الأساسي للصورة الاحتياطية.
أمثلة
HTML
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>