• 0

كيف أجعل من الصورة الموجودة في header متجاوبة مع جميع الشاشات؟

لي صورة على مستوى Header في صفحة html، هذه الصورة أريدها أن تصبح متجاوبة مع جميع الأجهزة والمقاسات المختلفة لشاشات العرض، كيف السبيل إلى فعل ذلك؟

كمثال، موقع remote.demowebsiteaddress.com

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

هناك أمرين عليك مراعاتهما أثناء العمل على تجاوب الصوة عند تغيير مقاس الشاشة  العارضة للموقع:

  1. أن يحتوى الوسم المُضمّن للصورة على خاصيتي margin وpadding ذات قيمة الصفر.
  2. أن يأخذ عرض الصورة القيمة 100%، لتبقى محافظة على مقاسها رغم تغير الشاشة.

لحصل في الأخير على كود في ملف التنسيق التالي:

/*الذي يضم الصورة body الكود الخاص بوسم*/
body{
   margin: 0;
   padding: 0;
}

/*تنسيق وسم الصورة*/
img{
   width: 100%;
}

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن