تنظیم ارتفاع و پهنا (Height/Width)
تنظیم ارتفاع و پهنا (Height & Width) 📐🖼️
ویژگیهای height و width برای تعیین اندازه المانها استفاده میشوند. درک درست از این ویژگیها برای ساخت لیاوتهای ریسپانسیو (واکنشگرا) حیاتی است.
۱. واحدهای اندازهگیری
شما میتوانید از واحدهای مختلفی استفاده کنید:
- px (پیکسل): اندازه ثابت و بدون تغییر.
- % (درصد): نسبت به عرض یا ارتفاع المان والد (Parent).
- auto: مقدار پیشفرض که اجازه میدهد مرورگر اندازه را بر اساس محتوا حساب کند.
div {
height: 200px;
width: 50%;
max-width: 800px;
background-color: powderblue;
}۲. کنترل هوشمند با Max و Min 🛡️
گاهی نمیخواهیم یک المان از یک حدی بزرگتر یا کوچکتر شود. ویژگیهای max-width و min-height اینجا به کمک ما میآیند.
چرا Max-Width مهم است؟ اگر عرض یک المان را 800px بگذارید، در موبایلهای کوچک اسکرول افقی میخورد. اما اگر
max-width: 800px; و width: 100%; بدهید، در دسکتاپ حداکثر 800px است و در موبایل به اندازه عرض صفحه کوچک میشود.
پیمایش محتوا: اگر ارتفاع یک المان را ثابت (مثلاً 200px) بگذارید اما متن داخل آن زیاد باشد، متن از باکس بیرون میزند. در چنین شرایطی از
overflow: auto; یا min-height استفاده کنید.
۳. مفهوم Viewport Units (vh & vw)
واحدهای مدرنی هستند که نسبت به اندازه کل پنجره مرورگر (Viewport) کار میکنند:
100vw: کل عرض صفحه نمایش.100vh: کل ارتفاع صفحه نمایش (بسیار مفید برای بخشهای Hero در سایتها).
تمرینهای عملی
برای تثبیت یادگیری این درس تمرینهای زیر را حل کنید
رسپانس کردن تصویر
Easy
سوال تمرین
یک قانون بنویسید که تصاویر (img) حداکثر عرضشان 100% والد خود باشد تا از کادر بیرون نزنند.
پاسخ تمرین
CSS
img {
max-width: 100%;
}آماده رفتن به درس بعدی هستید؟
این درس را به پایان رساندید و میتوانید به درس بعدی بروید.