css image-rendering 이미지 렌더링 깍두기, 이미지 확대축소 렌터링 동작에 대해서 힌트

less than 1 minute read

  • image-rendering
  • 이미지 확대축소 렌터링 동작에 대해서 힌트를 제공함

image-rendering: auto;  // 기본값. 최대한 부드러운 이미지로 표현 image-rendering: crisp-edges; //색상대조와 이미지 표준에 맞게 image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast;  //webkit 전용 = crisp-edges; image-rendering: optimize-contrast; //  image-rendering: optimizeQuality  // SVG용, early draft, 현재 동작안함 image-rendering: optimizeSpeed  // SVG용, early draft, 현재 동작안함 image-rendering: pixelated; //확대일때만 적용, nearest-neighbor를 사용하거나 유사한 알고리즘 사용. 픽셀을 기준으로 표시함(smooth 없음!) -ms-interpolation-mode: nearest-neighbor;

/* Global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset;

——–=——————-

default  300px+auto

300px+crisp-edges; 

300px+pixelated; 


IE : 지원안함 (-ms-interpolation-mode 를 대신 사용하시오) 그외 대부분 최신버전이면 지원됨.



🔗original-link

Updated: