آموزش CSS 3 > رابط کاربری در CSS 3 > خاصیت resize

خاصیت resize :

خاصیت resize ، تعیین می کند که آیا کاربر می تواند اندازه یک عنصر را بر روی صفحه تغییر دهد یا خیر .
برای مثال ، اگر مقدار این خاصیت را برای یک کادر متن تنظیم نمایید ، کاربر می تواند با عمل درگ کردن ، آن عنصر را بزرگ یا کوچک نماید .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax resize: none | both| horizontal | vertical:

مثال : resize : both ;

syntax توضیح هر یک از موارد
توضیح پارامتر
مقدار none تعیین می کند که اندازه عنصر ثابت بوده و قابل بزرگ و کوچک شدن نیست .
مقدار پیش فرض است .
none
مقدار both تعیین می کند که کاربر می تواند عنصر را در دو جهت عمودی و افقی بزرگ یا کوچک نماید . both
مقدار vertical تعیین می کند که کاربر می تواند عنصر را در جهت عمودی بزرگ یا کوچک نماید . vertical
مقدار horizontal  تعیین می کند که کاربر می تواند عنصر را در جهت افقی بزرگ یا کوچک نماید . horizontal

پشتیانی در مرورگر های مختلف :

اکثر مرورگر های مطرح به جز نابغه معروف به صورت عادی از این خاصیت پشتیانی می کنند .

کد لازم برای پشتیانی نوع مرورگر
پشتیانی عادی .
پشتیانی نمی شود .
پشتیانی نمی شود .
پشتیانی عادی .

مثال عملی :

در مثال زیر 3 تگ div داریم که هر کدام از آنها به یک حالت از خاصیت resize تنظیم شده اند . به بررسی خروجی ها بپردازید ( به نوع مرورگر هم دقت نمایید ) :

برای یک عنصر outline  تعیین
<!DOCTYPE html>
<html>
   <head>
    </head>
<body>
        <div style="border: 2px solid maroon; padding: 10px 40px; width: 300px; resize: none; overflow: auto;"> div 1 :: none </div>
        <div style="border: 2px solid black; padding: 10px 40px; width: 300px; resize: both; overflow: auto;"> div 2 :: both </div>
        <div style="border: 1px solid red; padding: 10px 40px; width: 300px; resize: vertical ; overflow: auto;"> div 3 :: vertical </div>
        <div style="border: 2px solid blue; padding: 10px 40px; width: 300px; resize: horizontal; overflow: auto;"> div 4 :: horizontal </div> </body>
</html>
کد
div 1 :: none


div 2 :: both


div 3 :: vertical


div 4 :: horizontal
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟