ویژگی resize مشخص کردن می‌کند که آیا یک عنصر قابلیت تغییر مقدار و اندازه توسط کاربر را دارد یا نه و همچنین در صورتی که دارد آن قابلیت در کدام جهت اتفاق می‌افتد.

حتما تا کنون عناصر <textarea> را دیده اید که در گوشه پایین آنها یک خط کشی مثلثی شکل وجود دارد که نشان میدهد می قدرت عنصر را در جهت های متنوع و گوناگون و مختلف کوچک یا پهناور و بزرگ کرد. ویژگی resize آن امکان را به ما میدهد تا آن مکانیزم را روی عناصر دیگر HTML نیز بوجود بیاوریم.

با بهره بری و استفاده از ویژگی resize در سی اس اس می‌قدرت به تمامی عناصر بلاک، عناصر جایگزین و همچنین سلول های یک جدول، قابلیت تغییر مقدار و اندازه را داد. البته آن ویژگی تنها در نوعی حالت کار می کند که ویژگی overflow آن هم عنصر شامل مقداری غیر از visible باشد. در صورتی که مقدار overflow در جهت های متنوع و گوناگون و مختلف متغایر و متفاوت باشد (overflow-x و همچنین overflow-y)، resize تنها و فقط در آن هم جهت اعمال می می شود که مقدار غیر از visible می باشد.

همچنین گاهی مستلزم و نیاز می باشد که عناصری که بصورت پیشفرض شامل قابلیت resize خواهند بود (مانند textarea) را از آن حالت خارج کرد. و همچنین یا حتی تنها اجازه داد آن اتفاق در یک جهت بیافتد که می قدرت آن کار را با مقدار none جهت ویژگی resize بررسی کننده و پروهشگر کرد.

سینتکس و همچنین مقادیر آن ویژگی بصورت زیر می باشد:

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

none

none مقدار ابتدایی و اولیه جهت آن ویژگی می باشد و همچنین باعث غیر فعال بودن قابلیت تغییر مقدار و اندازه در عنصر می می شود.

both

آن مقدار باعث می می شود تا کاربر بتواند عنصر را از هر دو جهت عمودی و همچنین افقی کوچک پهناور و بزرگ کند، یعنی هم امکان تغییر ارتفاع و همچنین هم عرض عنصر جهت کاربر وجود دارد.

.element 
resize: both;

horizontal

با بهره بری و استفاده از مقدار horizontal جهت ویژگی resize تنها مکانیزم تغییر مقدار و اندازه افقی عنصر جهت کاربر وجود خواهد شد.

vertical

با بهره بری و استفاده از مقدار vertical جهت ویژگی resize تنها مکانیزم تغییر مقدار و اندازه عمودی عنصر جهت کاربر وجود خواهد شد.

inherit

آن مقدار باعث می می شود تا عنصر رفتار پدرش را در مورد resize به ارث ببرد.

دموی زیر را جهت بررسی کردن آن ویژگی ببینید:

See the Pen resize by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی نرم افزار مرورگر اینترنتی ها