CSS image-rendering 속성

정의와 사용법

image-rendering 이 속성은 이미지 확대에 사용할 알고리즘 유형을 지정합니다.

주의:이 속성은 축소되지 않은 이미지에 대해 유효하지 않습니다.

예제

이미지 확대에 사용할 수 있는 다양한 알고리즘을 보여줍니다:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

본인이 직접 시도해 보세요

CSS 문법

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

속성 값

값 설명
auto 브라우저가 확대 알고리즘을 선택합니다. 기본 값.
smooth 이미지에서의 색상을 평滑화하기 위한 알고리즘을 사용합니다.
high-quality smooth와 같지만 더 높은 품질의 확대를 선호합니다.
crisp-edges 이미지에서의 대비와 경계를 유지하기 위한 알고리즘을 사용합니다.
pixelated

이미지가 확대되면 가장 가까운 이웃 알고리즘을 사용하여 이미지가 대형 픽셀로 보입니다.

이미지가 축소되면 auto와 같습니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit.

기술 세부 사항

기본 값: auto
상속성: yes
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.imageRendering="pixelated"

브라우저 지원

표의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge 및 Opera는 crisp-edges 값의 별명으로 -webkit-optimize-contrast을 사용합니다.