המאפיין max-width
ב-CSS קובע את הרוחב המקסימלי של האלמנט. הוא משמש להגביל את הרוחב של האלמנט כך שלא יעלה על הערך המוגדר, גם אם רוחב האלמנט הוגדר באחוזים או בערכים אחרים.
באמצעות max-width
ניתן למנוע מהאלמנט לגדול מעבר לרוחב מסוים, דבר שיכול להיות שימושי בעיצובים רגישים (responsive) או כשיש צורך לשמור על עיצוב מסוים.
להלן דוגמה לשימוש במאפיין max-width
:
בדוגמה זו, האלמנט יתפוס את כל רוחב הקונטיינר עד לרוחב מקסימלי של 500 פיקסלים.
באמצעות max-width
ניתן לשלוט בעיצוב פריסות רגישות (responsive) ולהתאים את הרוחב בהתאם לגודל המסך או קונטיינר.
<div style="max-width: 500px; width: 100%; border: 2px solid black; background: lightgray;">
תוכן עם רוחב מקסימלי של 500 פיקסלים
</div>
רק רגע