css image-rendering 이미지 렌더링 깍두기, 이미지 확대축소 렌터링 동작에 대해서 힌트
- 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 를 대신 사용하시오) 그외 대부분 최신버전이면 지원됨.