الخاصية max-width

الخاصية max-width في CSS تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تتجاوز القيمة المُحدَّدة في الخاصية max-width.

بطاقة الخاصية

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	نسبة مئوية أو طول مطلق أو الكلمة المحجوزة none.

/* <length> أطوال */
max-width: 3.5em;

/* <percentage> نسب مئوية */
max-width: 75%;

/* كلمات محجوزة */
max-width: none;

/* قيم عامة */
max-width: inherit;
max-width: initial;
max-width: unset;

الخاصية max-width لها أولوية على الخاصية width، لكن الخاصية min-width لها أولوية على max-width.

أمثلة

سنستخدم في المثال الآتي عنصر <div> عرضه يساوي 50% من عرض العنصر الحاوي عليه، على ألّا يتجاوز عرضه قيمة الخاصية max-width ألا وهي 600px:

<div>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</div>

شيفرة CSS:

div {
  width: 50%;
  max-width: 600px;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	7.0	7.0	1.0

البنية العامة

none

لا يوجد عرض أقصى لهذا العنصر.

<length>

تحديد العرض الأقصى بالأطوال المطلقة.

<percentage>

تحديد العرض الأقصى كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر.

البنية الرسمية

max-width: <length> | <percentage> | none;

انظر أيضًا

• صفحة كل من الخاصيات width، و height المسؤولة عن تحديد أبعاد العنصر.
• صفحة الخاصية max-height التي تضبط الارتفاع الأدنى للعنصر.
• صفحة الخاصية min-height التي تضبط الارتفاع الأدنى للعنصر.
• صفحة الخاصية min-width التي تضبط العرض الأدنى للعنصر.

مصادر ومواصفات

• مسودة CSS Intrinsic & Extrinsic Sizing Module Level 3، أضافت هذه المواصفة الكلمات المحجوزة max-content و min-content و fit-content و fill-available لكنها ليست مدعومة في المتصفحات بعد.
• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.