সিএসএস(৩) resize প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera | |
|---|---|---|---|---|---|---|
| resize | resize | ৪.০ | সাপোর্ট করে না। | ৫.০ ৪.০ -moz- |
৪.০ | ১৫.০ |
সংজ্ঞা ও ব্যবহার
ব্যবহারকারী দ্বারা একটি এলিমেন্ট resize হবে কিনা resize প্রোপার্টি তা নির্ধারন করে।
পরামর্শঃ
- resize প্রোপার্টি ওভারফ্লো ভ্যালুকে গননা করে এলিমেন্টে প্রয়োগ করে যা "visible" ভ্যালু থেকে পাওয়া যায়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
resize: none/both/horizontal/vertical/initial/inherit;
একটি <div> এলিমেন্টকে ব্যবহারকারী দ্বারা resize করা যায় তা নির্ধারন করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>div এলিমেন্টের উচ্চতা এবং প্রস্থ পরিবর্তন করি।</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.resize="both"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
#myDIV {
border: 1px solid black;
background-color: lightblue;
width: 270px;
overflow: auto;
}
</style>
</head>
<body>
<p>div এলিমেন্টের সাইজ পরিবর্তন করার জন্য "চেষ্টা করি" বাটনে ক্লিক করিঃ</p>
<button onclick="myFunction()">চেষ্টা করি</button>
<script>
function myFunction() {
document.getElementById("myDIV").style.resize = "both";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরন
ব্যবহারকারীরা শুধুমাত্র একটি <div> এলিমেন্ট এর উচ্চতা resize করতে পারবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
div এলিমেন্টের সাইজ পরিবর্তন করি
</body>
</html>
ফলাফল
ব্যবহারকারী দ্বারা একটি <div> এলিমেন্টের প্রস্থ resize করা যায় ।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<div>div এলিমেন্টের প্রস্থ পরিবর্তন করি</div>
</body>
</html>
ফলাফল
ডিফল্ট মানের ক্ষেত্রে, <textarea> এলিমেন্ট resizable। টেক্সট এরিয়া দূর করে resize করতে resize প্রোপার্টি টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<p>স্বাভাবিকভাবেই,টেক্সট এরিয়া রিসাইজ করা যায়।
এই উদাহরনে আমরা resize প্রোপার্টি ব্যবহার করেছি টেক্সট এরিয়াকে রিসাইজ হওয়া থেকে বিরত রাখতে।</p>
<textarea id="test">রিসাইজ করা যাবে না</textarea>
<br>
<textarea>রিসাইজ করা যাবে(ডিফল্ট)</textarea>
</body>
</html>
ফলাফল
resize প্রোপার্টির ভ্যালু-সমূহ
- none - ডিফল্ট ভ্যালু। ব্যবহারকারী এলিমেন্ট কে resize করতে পারবেনা।
- both - ব্যবহারকারী এলিমেন্টের উচ্চতা এবং প্রস্থ উভয়ই নিয়ন্ত্রন করতে পারে।
- horizontal - ব্যবহারকারী এলিমেন্টের প্রস্থ নিয়ন্ত্রন করতে পারে।
- vertical - ব্যবহারকারী এলিমেন্টের উচ্চতা নিয়ন্ত্রন করতে পারে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
resize প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।