عرض و ارتفاع در CSS

تنظیم عرض و ارتفاع

صفات height و width برای تنظیم عرض و ارتفاع عناصر به کار می رود. صفات height  و width می توانند بر روی auto تنظیم شوند (پیش فرض مرورگر : خود مرورگر عرض و ارتفاع را محاسبه می کند). یا با مقادیر مشخصی از px ، cm و ... و یا با درصدی از عرض بلوک نگه دارنده عنصر تعریف شوند.

این عنصر دارای 200px ارتفاع و 50% عرض می باشد.


مثال :

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}

تنظیم max-width

صفت max-width برای تعیین  حداکثر عرض یک عنصر به کار می رود. این صفت می تواند در مقادیر مشخصی از px ، cm و سایر واحد های طولی  تعریف شود  و یا درصدی از بلوک نگه دارنده عنصر باشد. حتی می توان آن را بر روی مقدار none تنظیم کرد (این مقدار پیش فرض است . یعنی عرض حداکثری وجود نداشته باشد).

مشکل در مثال قبلی این است که اگر پنجره مرورگر را کمتر از 500 پیکسل قرار دهیم ، یک نوار اسکرول افقی نمایش داده می شود و باید برای مشاهده ادامه div موجود در آن ، اسکرول کنیم. استفاده از max-width این امکان را برای مرورگر فراهم می کند تا در صفحات کوچکتر ، صفحه را بهینه نمایش دهد.

نکته ! مقدار max-width بر مقدار width غلبه می کند.

در مثال زیر یک عنصر div با ارتفاع 100 پیکسل و عرض حداکثری 500 پیکسل نمایش داده شده است.

مثال :

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}