CSS 이미지 렌더링 속성
예시
이미지 스케일링에 사용할 수 있는 다양한 알고리즘 표시:
.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;
}
정의 및 사용
속성 은 image-rendering
이미지 크기 조정에 사용할 알고리즘 유형을 지정합니다.
참고: 이 속성은 크기가 조정되지 않은 이미지에는 영향을 주지 않습니다.
기본값: | 자동 |
---|---|
상속: | 네 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
JJavaScript 구문: | 개체 .style.imageRendering="픽셀화" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome, Edge, Opera 및 Safari는
crisp-edges
값 에 대체 이름을 사용합니다 -webkit-optimize-contrast
.
CSS 구문
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
속성 값
Value | Description |
---|---|
auto | Let the browser choose the scaling algorithm. This is default |
smooth | Use an algorithm that smooth out the colors in the image |
high-quality | Same as smooth, but with a preference for higher-quality scaling |
crisp-edges | Use an algorithm that will preserve the contrast and edges in the image |
pixelated | If the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |