Comment puis-je désactiver l'anticrénelage lors de la mise à l'échelle des images en CSS ?

Désactivation de l'anticrénelage dans la mise à l'échelle de l'image

Lors de l'agrandissement d'une image, l'anticrénelage, une technique qui lisse les bords des pixels, est souvent appliqué pour réduire la pixellisation. Cependant, dans certains cas, il peut être souhaitable de conserver les bords nets, ce qui rend l'anticrénelage indésirable.

En CSS, il n'y a pas d'indicateur direct pour désactiver l'anticrénelage. Cependant, une combinaison de propriétés peut obtenir un effet similaire :

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

La propriété image-rendering définit l'algorithme de rendu de l'image. La valeur optimiseSpeed ​​donne la priorité à la vitesse plutôt qu'à la qualité, ce qui entraîne des bords pixellisés. Les valeurs -moz-crisp-edges, -o-crisp-edges et -webkit-optimize-contrast spécifiques au navigateur contribuent également à des visuels nets.

De plus, pixellisés, optimisent le contraste et -ms- mode d'interpolation : le voisin le plus proche garantit un rendu pixelisé sur différents navigateurs, y compris IE8.

En appliquant ces propriétés, les images peuvent être agrandis sans le lissage indésirable introduit par l'anticrénelage, préservant ainsi leurs contours nets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!