الصور المتجاوبة مع مختلف الأجهزة واتجاه الرسومات

يتم غالبًا تنفيذ الصور سريعة الاستجابة باستخدام السمة 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>: ستعتمد القيم المناسبة للسمتَين width وheight على طريقة استخدام العلامة <source> للسمة srcset. (يمكنك الاطّلاع أعلاه على معلومات عن استخدام "srcset").
• ضبط نمط الصور: إذا كنت تريد تعديل نمط الصور، تذكّر أن إضافة النمط إلى العلامة <source> لن يكون له أي تأثير، لأنّ العلامة <source> هي عنصر فارغ. بدلاً من ذلك، ستحتاج إلى تصميم علامة <img> المقابلة.
• ضبط السمتَين 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>