Sifa ya mask-size

Sifa mask-size inaweka ukubwa wa picha ya barakoa. Unaweza kubainisha vipimo maalum kwenye saizi/pesenti au kutumia maneno muhimu ya cover na contain.

Kiambishi

csskichaguli {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

Thamani

Thamani	Maelezo
`auto`	Ukubwa asilia wa picha (msingi).
`cover`	Inabadilisha kiwango cha barakoa huku ikihifadhi uwiano, ili kufunika kikamilifu kipengele.
`contain`	Inabadilisha kiwango cha barakoa huku ikihifadhi uwiano, ili kutoshea kabisa ndani ya kipengele.
`100px 50px`	Vipimo maalum kwenye saizi.
`50% 100%`	Vipimo kwa asilimia kutoka kwa vipimo vya kipengele.

Mfano . Ukubwa cover

Barakoa inabadilishwa kiwango, ili kufunika kabisa kipengele:

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

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: url("heart.svg");
  mask-position: katikati;
  mask-size: cover;
  mask-repeat: isirudiwe;
}

Результат:

Mfano . Ukubwa contain

Barakoa inabadilishwa kiwango, ili toshee kabisa ndani ya kipengele:

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

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: url("heart.svg");
  mask-position: katikati;
  mask-size: contain;
  mask-repeat: isirudiwe;
}

Результат:

Mfano . Ukubwa uliowekwa kwenye saizi

Barakoa yenye ukubwa wa 150×150 saizi:

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

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: url("heart.svg");
  mask-position: katikati;
  mask-size: 150px;
  mask-repeat: isirudiwe;
}

Результат:

Mfano . Ukubwa kwa asilimia

Barakoa inachukua 80% ya upana na 60% ya urefu wa kipengele:

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

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: url("heart.svg");
  mask-position: katikati;
  mask-size: 80% 60%;
  mask-repeat: isirudiwe;
}

Результат:

Mfano . Vipimo tofauti kwenye mihimili

Barakoa 200px kwa upana na 100px kwa urefu:

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

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: url("heart.svg");
  mask-position: katikati;
  mask-size: 200px 100px;
  mask-repeat: isirudiwe;
}

Результат:

Angalia pia

sifa mask-position,
inabainisha msimamo wa barakoa
sifa mask-repeat,
inabainisha kurudiwa kwa barakoa
sifa mask,
ufupisho wa sifa zote za kufunika