বৈশিষ্ট্য mask-size
mask-size বৈশিষ্ট্যটি মাস্ক ইমেজের আকার সেট করে। পিক্সেল/শতাংশে নির্দিষ্ট আকার নির্ধারণ করা যেতে পারে বা cover এবং contain কীওয়ার্ড ব্যবহার করা যেতে পারে।
সিনট্যাক্স
সিলেক্টর {
mask-size: auto | <length> | <percentage> | cover | contain;
}
মানসমূহ
| মান | বর্ণনা |
|---|---|
auto |
ইমেজের আসল আকার (ডিফল্ট)। |
cover |
অনুপাত বজায় রেখে মাস্ক স্কেল করে যাতে এটি এলিমেন্টটি সম্পূর্ণরূপে ঢেকে দেয়। |
contain |
অনুপাত বজায় রেখে মাস্ক স্কেল করে যাতে এটি এলিমেন্টের মধ্যে সম্পূর্ণভাবে ফিট হয়। |
100px 50px |
পিক্সেলে নির্দিষ্ট আকার। |
50% 100% |
এলিমেন্টের আকারের শতকরা হিসাবে আকার। |
উদাহরণ . cover আকার
মাস্ক স্কেল করা হয় যাতে এলিমেন্টটি সম্পূর্ণরূপে ঢাকা পড়ে:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
উদাহরণ . contain আকার
মাস্ক স্কেল করা হয় যাতে এটি এলিমেন্টের মধ্যে সম্পূর্ণভাবে ফিট হয়:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
উদাহরণ . পিক্সেলে নির্দিষ্ট আকার
150×150 পিক্সেল আকারের মাস্ক:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
উদাহরণ . শতাংশে আকার
মাস্কটি এলিমেন্টের প্রস্থের 80% এবং উচ্চতার 60% জায়গা নেয়:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
উদাহরণ . অক্ষ অনুযায়ী ভিন্ন আকার
প্রস্থে 200px এবং উচ্চতায় 100px আকারের মাস্ক:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
আরও দেখুন
-
mask-positionবৈশিষ্ট্য,
মাস্কের অবস্থান নির্ধারণ করে -
mask-repeatবৈশিষ্ট্য,
মাস্কের পুনরাবৃত্তি নির্ধারণ করে -
maskবৈশিষ্ট্য,
মাস্কিং সম্পর্কিত সকল বৈশিষ্ট্যের জন্য সংক্ষিপ্ত রূপ
