الصور المتجاوبة باستخدام `srcset`

كيفية استخدام سمة HTML img tag srcset لتحديد الصور المتجاوبة

الsrcsetسمة من سماتimgتسمح لك العلامة بتعيين صور سريعة الاستجابة يمكن للمتصفح استخدامها اعتمادًا على كثافة البكسل أو عرض النافذة ، وفقًا لتفضيلاتك. بهذه الطريقة ، يمكنه فقط تنزيل الموارد التي يحتاجها لعرض الصفحة ، دون تنزيل صورة أكبر إذا كانت موجودة على جهاز محمول ، على سبيل المثال.

فيما يلي مثال ، حيث نقدم 4 صور إضافية لأربعة أحجام مختلفة للشاشة:

<img src="dog.png"
  alt="A picture of a dog"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

في الsrcsetنحن نستخدم الwقياس للإشارة إلى عرض النافذة.

نظرًا لأننا نقوم بذلك ، نحتاج أيضًا إلى استخدامsizesينسب:

<img src="dog.png"
  alt="A picture of a dog"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

في هذا المثال(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxسلسلة فيsizesتصف السمة حجم الصورة فيما يتعلق بإطار العرض ، بشروط متعددة مفصولة بفاصلة.

حالة الوسائطmax-width: 500pxيحدد حجم الصورة بالاقتران مع عرض منفذ العرض. باختصار ، إذا كان حجم النافذة <500 بكسل ، فإنه يعرض الصورة بنسبة 100٪ من حجم النافذة.

إذا كان حجم النافذة أكبر ولكن <900px، فإنه يعرض الصورة بنسبة 50٪ من حجم النافذة.

وإذا كانت أكبر من ذلك ، فإنها تعرض الصورة بدقة 800 بكسل.

الvw unit of measure can be new to you, and in short we can say that 1 vwهو 1٪ من عرض النافذة ، لذلك100vwهو 100٪ من عرض النافذة.

موقع مفيد لإنشاء ملفاتsrcsetوالصور الأصغر تدريجيًا هيhttps://responsivebreakpoints.com/.

تحميل مجانيكتيب HTML


المزيد من دروس html: