خاصية Max-Width
آخر تحديث: 2026-09-13
max-width خاصية Max-Width
تضبط خاصية max-width الحد الأقصى لعرض العنصر، مانعةً إياه من أن يصبح عريضًا جدًا على الشاشات الكبيرة مما يضر بقابلية القراءة. قيمتها الافتراضية none تعني عدم وجود حد أعلى. إنها أداة أساسية في التصميم المتجاوب، تُدمج غالبًا مع width:100% لكي تتكيف عناصر الوسائط دون تجاوز حجمها الجوهري.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | non-replaced |
| نوع الحركة | length |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
max-width: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | لا يوجد عرض أقصى. |
<length> | النوع | عرض أقصى ثابت. |
<percentage> | النوع | نسبة مئوية بالنسبة للكتلة الحاضنة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لـ max-width أسبقية على width؛ فحتى لو تم تعيين width أكبر، فلن يتجاوز العرض الفعلي قيمة max-width.
❓ الأسئلة الشائعة
Qماذا يفعل max-width:100%؟
Aيمنع max-width:100% العنصر من أن يصبح أعرض من الأصل، ومع height:auto يُحجّم الصور بشكل متناسب دون تجاوز، وهو الطريقة القياسية لجعل الوسائط متجاوبة. على عكس width:100% الذي يجبر العنصر على ملء الحاوية ويمدد الصور الصغيرة، فإن max-width:100% يُصغّر الصورة فقط عندما تكون الحاوية أضيق من حجم الصورة الجوهري؛ وتُعرض الصور الأكبر بحجمها الكامل.
Qكيف أوسّط المحتوى مع تحديد عرضه الأقصى؟
Aاضبط max-width للحد من العرض واستخدم margin:0 auto لتوسيط العنصر أفقيًا، وهو الأسلوب الأكثر شيوعًا. على سبيل المثال، يؤدي جسم المقال ذو max-width:800px; margin:0 auto; إلى الانكماش تلقائيًا على الشاشات الضيقة والبقاء في المنتصف عند 800px على الشاشات العريضة. لكي يعمل margin:auto، يجب أن يكون العنصر على مستوى الكتلة وأضيق من المساحة المتاحة. هذا يحافظ على طول سطر مريح للقراءة على شاشات سطح المكتب مع بقائه سائلًا تمامًا على الشاشات الأصغر.
Qإذا تم تحديد max-width و width معًا، فأيهما يفوز؟
Aيفوز max-width. عندما يتجاوز width قيمة max-width، يُعرض العنصر عند max-width؛ وعندما يكون width أصغر، يُطبَّق width. الأولوية العامة هي min-width، ثم max-width، ثم width، لذا يقيد max-width الـ width من الأعلى ولا يمكن أن يهبط دون min-width. هذا الحصر هو ما يمنع قيم width كبيرة جدًا من كسر التخطيط، وهو سبب بقاء المحتوى ضمن مقاس قراءة مريح.
Qهل يمكن لـ max-width استخدام نسبة مئوية؟
Aنعم. يقبل max-width القيم الطولية والنسب المئوية وكلمات المحتوى المفتاحية. تُحسب النسبة المئوية بالنسبة لعرض الكتلة الحاضنة، فمثلًا يعني max-width:80% ألا يتجاوز 80% من الحاوية الأصل. كما يدعم كلمات مثل min-content و max-content و fit-content، التي تستمد الحد الأعلى من المحتوى نفسه وتوفر سلوكًا متجاوبًا دون استعلامات وسائط. وتعد النسب المئوية مفيدة بشكل خاص لتأطير اللوحات داخل آباء سائلة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
