বৈশিষ্ট্য mask-size

mask-size বৈশিষ্ট্যটি মাস্ক ইমেজের আকার সেট করে। পিক্সেল/শতাংশে নির্দিষ্ট আকার নির্ধারণ করা যেতে পারে বা cover এবং contain কীওয়ার্ড ব্যবহার করা যেতে পারে।

সিনট্যাক্স

cssসিলেক্টর {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

মানসমূহ

উদাহরণ . cover আকার

মাস্ক স্কেল করা হয় যাতে এলিমেন্টটি সম্পূর্ণরূপে ঢাকা পড়ে:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
}

Результат:

উদাহরণ . contain আকার

মাস্ক স্কেল করা হয় যাতে এটি এলিমেন্টের মধ্যে সম্পূর্ণভাবে ফিট হয়:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

উদাহরণ . পিক্সেলে নির্দিষ্ট আকার

150×150 পিক্সেল আকারের মাস্ক:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

উদাহরণ . শতাংশে আকার

মাস্কটি এলিমেন্টের প্রস্থের 80% এবং উচ্চতার 60% জায়গা নেয়:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 80% 60%;
  mask-repeat: no-repeat;
}

Результат:

উদাহরণ . অক্ষ অনুযায়ী ভিন্ন আকার

প্রস্থে 200px এবং উচ্চতায় 100px আকারের মাস্ক:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px 100px;
  mask-repeat: no-repeat;
}

Результат:

আরও দেখুন