Propriété mask-size

La propriété mask-size définit la taille de l'image du masque. Il est possible de définir des tailles spécifiques en pixels/pourcentages ou d'utiliser les mots-clés cover et contain.

Syntaxe

csssélecteur {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

Valeurs

Exemple . Taille cover

Le masque est redimensionné pour couvrir complètement l'élément :

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;
}

Результат:

Exemple . Taille contain

Le masque est redimensionné pour tenir entièrement dans l'élément :

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;
}

Результат:

Exemple . Taille fixe en pixels

Masque de 150×150 pixels :

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;
}

Результат:

Exemple . Taille en pourcentages

Le masque occupe 80% de la largeur et 60% de la hauteur de l'élément :

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;
}

Результат:

Exemple . Tailles différentes sur les axes

Masque de 200px de largeur et 100px de hauteur :

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;
}

Результат:

Voir aussi