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

1
  • 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 를 대신 사용하시오)
그외 대부분 최신버전이면 지원됨.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📅 달력형