Proprietà mask-size
La proprietà mask-size imposta la dimensione dell'immagine maschera. È possibile impostare dimensioni specifiche in pixel/percentuali o utilizzare le parole chiave cover e contain.
Sintassi
selettore {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Valori
| Valore | Descrizione |
|---|---|
auto |
Dimensioni originali dell'immagine (predefinito). |
cover |
Ridimensiona la maschera mantenendo le proporzioni in modo da coprire completamente l'elemento. |
contain |
Ridimensiona la maschera mantenendo le proporzioni in modo che si adatti completamente all'interno dell'elemento. |
100px 50px |
Dimensioni specifiche in pixel. |
50% 100% |
Dimensioni in percentuale rispetto alle dimensioni dell'elemento. |
Esempio . Dimensione cover
La maschera viene ridimensionata per coprire completamente l'elemento:
<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;
}
:
Esempio . Dimensione contain
La maschera viene ridimensionata per adattarsi completamente all'interno dell'elemento:
<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;
}
:
Esempio . Dimensione fissa in pixel
Maschera di dimensioni 150×150 pixel:
<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;
}
:
Esempio . Dimensione in percentuale
La maschera occupa l'80% della larghezza e il 60% dell'altezza dell'elemento:
<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;
}
:
Esempio . Dimensioni diverse per gli assi
Maschera di 200px di larghezza e 100px di altezza:
<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;
}
:
Vedi anche
-
proprietà
mask-position,
definisce la posizione della maschera -
proprietà
mask-repeat,
definisce la ripetizione della maschera -
proprietà
mask,
scorciatoia per tutte le proprietà di mascheratura
