resize

ویژگی 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.

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