Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
image-resolution
Expérimental:Il s'agit d'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriétéCSSimage-resolution définit la résolution intrinsèque de toutes les images matricielles utilisée dans l'élément. Cela affecte les images de contenu comme les éléments remplacés et le contenu généré, ainsi que les images décoratives générées à l'aide de la propriétébackground-image.
La résolution de l'image est définie par le nombre de pixels par unité de longueur de l'image, par exemple exprimé en pixels par pouce. Par défaut, CSS part du principe que la résolution d'une image est d'un pixel image par unité de pixel CSS. Cependant, la propriétéimage-resolution permet de définir une résolution différente.
Syntaxe
image-resolution: from-image;image-resolution: 300dpi;image-resolution: from-image 300dpi;image-resolution: 300dpi snap;/* Valeurs globales */image-resolution: inherit;image-resolution: initial;image-resolution: revert;image-resolution: revert-layer;image-resolution: unset;Valeurs
<resolution>Définit explicitement la résolution intrinsèque.
from-imageUtilise la résolution intrinsèque comme spécifié par le format de l'image. Si l'image ne spécifie pas elle-même sa propre résolution, alors la résolution explicitement spécifiée sera utilisée, si elle a été fournie. Sinon, la résolution par défaut sera de
1dppx(1 pixel image par unité de pixel CSS).snapSi le mot-clé
snapest fourni, la résolution calculée sera la résolution spécifiée arrondie à la valeur la plus proche correspondant à unpixel image défini sous la forme d'un nombre entier de pixels de l'appareil. Si la résolution est récupérée à partir de l'image, alors la résolution intrinsèque utilisée est la résolution native de l'image, arrondie de la même façon.
Note :Les formats vectoriels tels que SVG n'ont pas de résolution intrinsèque, cette propriété n'a aucun effet sur les images vectorielles.
Définition formelle
| Valeur initiale | 1dppx |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | tel que défini, sauf avec une résolution (<resolution>) éventuellement modifiée lors du calcul par la valeur"snap" |
| Type d'animation | discrète |
Syntaxe formelle
image-resolution =
[from-image||<resolution>]&&
snap?
Exemples
Définir une haute résolution pour l'impression
Lors de l'impression du document, utiliser une résolution plus élevée.
@media print { .mon-image { image-resolution: 300dpi; }}Utiliser la propriété image-resolution avec des solutions de repli
L'exemple ci-dessous utilise la résolution définie par l'image. Si l'image ne spécifie aucune résolution, alors la valeur de300dpi est utilisée à la place de la valeur par défaut de1dppx.
.mon-image { image-resolution: from-image 300dpi;}Spécifications
| Specification |
|---|
| CSS Images Module Level 4 # the-image-resolution |
Compatibilité des navigateurs
Voir aussi
- Autres propriétés CSS liées aux images :
object-fit,object-position,image-orientation,image-rendering. - Boggue sur Chromium : 1086473(angl.)