ویژگی CSS resize یک ویژگی است که به کاربران اجازه می‌دهد اندازه یک عنصر را تغییر دهند، به صورت عمودی، افقی، هر دو یا هیچ کدام، بر اساس مقدار مشخص شده.
ویژگی resize یک دستگیره را به گوشه پایین و راست یک عنصر در یک صفحه وب اضافه می‌کند. این دستگیره به کاربران اجازه می‌دهد برای تغییر اندازه یک عنصر، آن را بزرگتر یا کوچکتر کنند.
این فصل در مورد استفاده از ویژگی resize خواهد بود.
مقادیر ممکن
- none: هیچ روشی برای تغییر اندازه یک عنصر توسط کاربر ممکن نیست. این مقدار پیش‌فرض است.
- vertical: کاربر می‌تواند اندازه یک عنصر را در جهت عمودی تغییر دهد.
- horizontal: کاربر می‌تواند اندازه یک عنصر را در جهت افقی تغییر دهد.
- both: کاربر می‌تواند اندازه یک عنصر را هم در جهت افقی و هم در جهت عمودی تغییر دهد.
- block: کاربر می‌تواند اندازه یک عنصر را در جهت بلوک (هم افقی و هم عمودی، بسته به حالت نوشتاری و جهت) تغییر دهد.
- inline: کاربر می‌تواند اندازه یک عنصر را در جهت درون خطی (هم افقی و هم عمودی، بسته به حالت نوشتاری و جهت) تغییر دهد.
ویژگی‌های block و inline تنها در مرورگرهای Firefox و Safari پشتیبانی می‌شوند.
اعمال به عناصر با سرریز غیر قابل مشاهده، و عناصر جایگزین ممکن است، اگر تصاویر یا ویدیوها، و فریم‌های جایگزین را نشان دهند.
سینتکس
resize: none | vertical | horizontal| both;none Value
این بخش نشان می‌دهد که چگونه با استفاده از مقدار none برای ویژگی resize در CSS، کاربر ممانعت می‌شود از تغییر اندازه عنصر در هر جهتی. مقدار resize: none مقدار پیش‌فرض است.
در این مثال، یک textarea ایجاد شده است که با استفاده از CSS به اندازه معینی تنظیم شده و کاربر نمی‌تواند اندازه آن را تغییر دهد.
<html>
<head>
<style>
textarea {
background-color: #e7ef0e;
color: #ee2610;
resize: none;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea>
</body>
</html>در این مثال، textarea با زمینه زرد و متن قرمز ایجاد شده است. ویژگی resize بر روی none تنظیم شده است، بنابراین کاربر نمی‌تواند اندازه textarea را تغییر دهد.
vertical Value
این بخش نشان می‌دهد که چگونه با استفاده از مقدار vertical برای ویژگی resize در CSS، کاربر اجازه دارد اندازه ارتفاع عنصر <div> را به صورت عمودی با کشیدن گوشه پایین راست تغییر دهد.
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: vertical;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</body>
</html>در این مثال، یک div با اندازه و محتویات مشخص ایجاد شده است. ویژگی resize بر روی vertical تنظیم شده است، بنابراین کاربر می‌تواند ارتفاع عنصر div را به صورت عمودی تغییر دهد، اما نمی‌تواند عرض آن را تغییر دهد.
horizontal Value
این بخش نشان می‌دهد که چگونه با استفاده از مقدار horizontal برای ویژگی resize در CSS، کاربر اجازه دارد عرض عنصر <div> را به صورت افقی با کشیدن گوشه پایین راست تغییر دهد.
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: horizontal;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the internet.
</div>
</body>
</html>در این مثال، یک div با اندازه و محتویات مشخص ایجاد شده است. ویژگی resize بر روی horizontal تنظیم شده است، بنابراین کاربر می‌تواند عرض عنصر div را به صورت افقی تغییر دهد، اما نمی‌تواند ارتفاع آن را تغییر دهد.
both Value
در این بخش، از مقدار both برای ویژگی resize در CSS استفاده شده است. این ویژگی به کاربر اجازه می‌دهد تا اندازه عنصر را هم افقی و هم عمودی تغییر دهد.
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: both;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</body>
<html>در این مثال، یک div با اندازه و محتویات مشخص ایجاد شده است. ویژگی resize بر روی both تنظیم شده است، بنابراین کاربر می‌تواند هم عرض و هم ارتفاع عنصر div را با کشیدن گوشه پایین راست تغییر دهد.
inherit Value
در این بخش، از مقدار inherit برای ویژگی resize در یک المان فرزند استفاده شده است. با استفاده از این مقدار، المان فرزند همان رفتار تغییر اندازه را که برای المان والد تعیین شده است، به ارث می‌برد.
<html>
<head>
<style>
.my-box1 {
background-color: #e7ef0e;
color: #ee2610;
resize: vertical;
overflow: auto;
height: 150px;
width: 250px;
}
.my-box2 {
resize: inherit;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element.</h3>
<div class="my-box1">
<div class="my-box2">
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</div>
</body>
</html>در این مثال، دو المان div به نام‌های my-box1 و my-box2 ایجاد شده‌اند. ویژگی resize در my-box1 به صورت vertical تنظیم شده است، اما در my-box2 به مقدار inherit تنظیم شده است، بنابراین my-box2 همان رفتار resize مورد استفاده برای my-box1 را به ارث می‌برد.
Arbitrary Elements
در این بخش، یک مثال ارائه شده است که نشان می‌دهد چگونه می‌توان یک محتوا با استفاده از ویژگی resize به صورت arbitrary قابل تغییر اندازه کرد. به این معنی که می‌توان یک محتوا داخل یک المان دیگری را با استفاده از ویژگی resize تغییر اندازه داد.
<html>
<head>
<style>
.my-box {
background-color: #e7ef0e;
color: #ee2610;
resize: both;
overflow: scroll;
border: 2px solid black;
}
div {
height: 250px;
width: 250px;
}
p {
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element.</h3>
<div class="my-box">
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
<p class="my-box"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you ar going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</body>
</html>در این مثال، یک المان div با کلاس my-box ایجاد شده است که دارای ویژگی resize: both است، بنابراین کاربر می‌تواند به صورت عمودی و افقی اندازه این المان را تغییر دهد. داخل این المان، یک عنوان h2 و یک پاراگراف p ایجاد شده‌اند که دارای کلاس my-box هستند. این پاراگراف نیز دارای ویژگی resize: both است، بنابراین کاربر می‌تواند اندازه آن را همانند المان والد تغییر دهد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام