الصورة سريعة الاستجابة هي الصورة التي يمكنها التكيف مع الأجهزة المختلفة، بغض النظر عن أحجام الشاشة. أصبح الحصول على صورة سريعة الاستجابة على موقع الويب أمرًا بالغ الأهمية في الوقت الحاضر. لأنه لا يعمل على تسريع موقع الويب فحسب، بل يوفر أيضًا تجربة مستخدم رائعة عبر جميع الأجهزة. سيتم أيضًا تغيير حجم الصور المستجيبة عن طريق تغيير حجم المتصفح.
تتكيف الصور سريعة الاستجابة بكفاءة مع أحجام الشاشات المختلفة على الأجهزة المختلفة. ويضمن الحفاظ على الجودة. من المؤكد أن موقع الويب سريع الاستجابة الذي يحتوي على صور سريعة الاستجابة يزيد من معدلات التفاعل والتحويل. يمكن جعل الصور سريعة الاستجابة باستخدام CSS مع استعلامات الوسائط.
ستستخدم هذه الكتابة HTML وCSS لجعل الصور سريعة الاستجابة.
كيفية جعل الصور مستجيبة باستخدام HTML وCSS؟
لجعل الصور سريعة الاستجابة باستخدام HTML وCSS، اتبع الخطوات التالية:
الطريقة الأولى: استخدم خاصية 'العرض الأقصى'.
الطريقة الأولى لجعل الصورة مستجيبة هي باستخدام ' أقصى عرض ' ملكية. ال ' أقصى عرض 'تُستخدم الخاصية لتحديد الحد الأقصى لعرض الصورة. في حالة تجاوز المحتوى الحد الأقصى للعرض، فسيتغير ارتفاع العنصر.
إنشاء HTML
لإضافة ملف صورة إلى علامة
الخاصة بـ HTML، يحتاج المستخدمون إلى استخدام علامةأضف CSS
الآن، قم بإنشاء ملف CSS خارجي واحفظه بالملحق '. المغلق 'امتداد الملف، وربطه داخل علامة
لملف HTML. لتصميم ملف الصورة في ملف CSS، ابدأ بعلامة img وافتح الأقواس المتعرجة. ثم، داخل القوس المتعرج، أضف ' أقصى عرض: 100% ؛' لملاءمة الصورة أفقيًا داخل الحاوية. علاوة على ذلك، فإنه سيمنع قطع الصور. وبعد ذلك أضف ' الارتفاع: تلقائي ؛' لضبط الارتفاع تلقائيًا، حتى يتم عرض الصورة بشكل صحيح:img {
أقصى عرض : 100% ;
ارتفاع : آلي ;
}
قم بتغيير حجم نافذة المتصفح للتحقق من كيفية تغيير حجم الصورة.
الطريقة الثانية: استخدم خاصية 'العرض'.
هناك طريقة أخرى لجعل الصورة مستجيبة وهي استخدام الخاصية ' عرض '. الملكية ' عرض 'يحدد عرض الصور والنص. ولا يحتوي على هوامش أو حشوة أو حدود. يمكنه ضبط حجم الصور والنص على شكل cm أو px أو %. لجعل الصورة سريعة الاستجابة، ما عليك سوى تعيين ' عرض 'ملكية إلى' 100 %'. جلسة ' العرض: 100% ؛' يعني أن الصورة كبيرة مثل العنصر الأصلي:
img {عرض : 100% ;
ارتفاع : آلي ; }
ما ورد أعلاه يؤكد أن الصورة سريعة الاستجابة. للتحقق مما إذا كان يستجيب أم لا، ما عليك سوى تغيير حجم نافذة المتصفح.
الطريقة الثالثة: تطبيق استعلامات الوسائط
تساعد استعلامات وسائط CSS المستخدمين على تعديل مظهر صفحة الويب. يحتوي استعلام وسائط CSS على شروط، متى تحققت هذه الشروط، سيتغير مظهر الجهاز أو المتصفح. يمكن أن تساعد استعلامات الوسائط أيضًا المستخدمين في جعل الصور سريعة الاستجابة. لهذا السبب، حدد أولاً '@' وسائط 'علامة ثم حدد' أقصى عرض ' الخاصية وتعيين أقصى عرض للصورة داخل الأقواس. كلما استوفي هذا الشرط، سوف تستجيب الصورة. بعد ذلك، أضف الأقواس المتعرجة وحدد علامة img، وحدد ' العرض: 100% ؛' قيمة:
@وسائط ( أقصى عرض : 480 بكسل ) {img {
عرض : 100% ;
}
}
ملحوظة : لن تستجيب الصورة إلا إذا استوفت الشرط المحدد.
تم تطبيق استعلام وسائط CSS، وستكون الصورة الآن مستجيبة إذا تم تغيير حجمها إلى حجم الصورة المحدد. وإلا فلن يستجيب:
خاتمة
لجعل الصور مستجيبة مع HTML وCSS، لدى المستخدمين طرق مختلفة. تتضمن هذه الأساليب جعل الصور سريعة الاستجابة باستخدام ' أقصى عرض ' ملكية، ' عرض '، وأيضًا من خلال تطبيق استعلام وسائط CSS. قدمت هذه المقالة للمستخدمين الحل الكامل لجعل الصور سريعة الاستجابة.