Les éléments <img>, <object>, <video>,<audio>, canvas et <iframe> sont des objets dit remplacés, leur contenu est chargé à partir d’une ressource externe et est indépendent du CSS.
On peut modifier la manière dont un objet remplacé s’adapte et est positionné dans sa boîte grâce à object-fit et object-position.
object-fit définit la façon dont un élément remplacé s’adapte à sa boîte [CSS3]
object-fit: fill | contain | cover | none | scale-down
object-position définit l’alignement d’un élément remplacé à l’intérieur de sa boîte [CSS3]
object-position: (left | center | right | top | bottom | <length-percentage>){1,2}
JSFiddle object-fit, object-position
Définit l’orientation d’une image [CSS3]
image-orientation: from-image | <angle> | [ <angle>? flip ]
Définit l’algorithme à utiliser pour redimensionner l’image [CSS3]
image-rendering: auto | crisp-edges | pixelated
Les filtres permettent d’appliquer des effets à une image, un arrière-plan ou des bordures: flou, saturation, etc.
Définition:
filter: blur( <length> ) ||
brightness( <number-percentage> ) ||
saturate( <number-percentage> ) ||
hue-rotate( <angle> ) ||
contrast( <number-percentage> ) ||
invert( <number-percentage> ) ||
grayscale( <number-percentage ) ||
sepia( <number-percentage> ) ||
opacity( <number-percentage> ) ||
drop-shadow( <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ) ||
url( <uri svg> )
| Filtre | Description |
|---|---|
blur() |
Flou gaussien |
brightness() |
Modifie la luminosité 0% noir, 100% image d’origine, >100% augmente la luminosité |
contrast() |
Modifie le contraste 0% gris, 100% image d’origine, >100% augmente le contraste |
drop-shadow() |
Ombre portée |
grayscale() |
Niveau de gris 100% niveau de gris, 0% image d’origine |
sepia() |
Sepia 100% sepia, 0% image d’origine |
hue-rotate() |
Rotation de teinte 0deg image d’origine |
invert() |
Inverse les couleurs |
opacity() |
Modifie l’opacité 100% image d’origine, 0% transparent |
saturate() |
Modifie la saturation 0% désaturé, 100% image d’origine, >100% saturé |
Exemple:
{
filter: contrast(175%) brightness(103%);
}