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
sélecteur {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Valeurs
| Valeur | Description |
|---|---|
auto |
Taille originale de l'image (par défaut). |
cover |
Redimensionne le masque en conservant les proportions pour qu'il couvre complètement l'élément. |
contain |
Redimensionne le masque en conservant les proportions pour qu'il tienne entièrement dans l'élément. |
100px 50px |
Tailles spécifiques en pixels. |
50% 100% |
Tailles en pourcentages par rapport aux dimensions de l'élément. |
Exemple . Taille cover
Le masque est redimensionné pour couvrir complètement l'élément :
<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;
}
:
Exemple . Taille contain
Le masque est redimensionné pour tenir entièrement dans l'élément :
<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;
}
:
Exemple . Taille fixe en pixels
Masque de 150×150 pixels :
<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;
}
:
Exemple . Taille en pourcentages
Le masque occupe 80% de la largeur et 60% de la hauteur de l'élément :
<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;
}
:
Exemple . Tailles différentes sur les axes
Masque de 200px de largeur et 100px de hauteur :
<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;
}
:
Voir aussi
-
propriété
mask-position,
définit la position du masque -
propriété
mask-repeat,
définit la répétition du masque -
propriété
mask,
raccourci pour toutes les propriétés de masquage
