목차
- image-rendering 예제 - 크기 조정 가능 이미지의 렌더링 방식 지정
- image-rendering 정의
- image-rendering 구문
image-rendering 예제 - 크기 조정 가능 이미지의 렌더링 방식 지정
<style>
.image {
height: auto;
width: 180px;
image-rendering: auto;
}
.crisp-edges {
image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, Safari */
image-rendering: crisp-edges;
}
.pixelated {
image-rendering: pixelated;
}
.smooth {
image-rendering: smooth;
}
.high-quality {
image-rendering: high-quality;
}
</style>
<h2>image-rendering: auto;</h2>
<img class="image" src="https://i.imgur.com/57sBeiJ.gif" alt="Happy" width="120" height="96">
<h2>image-rendering: crisp-edges;</h2>
<img class="image crisp-edges" src="https://i.imgur.com/57sBeiJ.gif" alt="Happy" width="120" height="96">
<h2>image-rendering: pixelated;</h2>
<img class="image pixelated" src="https://i.imgur.com/57sBeiJ.gif" alt="Happy" width="120" height="96">
<h2>image-rendering: smooth;</h2>
<img class="image smooth" src="https://i.imgur.com/57sBeiJ.gif" alt="Smiley" width="120" height="96">
<h2>image-rendering: high-quality;</h2>
<img class="image high-quality" src="https://i.imgur.com/57sBeiJ.gif" alt="Happy" width="120" height="96">
<h2>원본이미지</h2>
<img src="https://i.imgur.com/57sBeiJ.gif" alt="Happy" width="120" height="96">
결과보기
image-rendering 정의
크기 조정 가능한 이미지의 렌더링 방식 알고리즘 선택.
1.
- 크기 조정 불가한 이미지에 적용 X
- 지정요소 자체, 지정요소의 다른 속성들에 설정된 이미지, 해당요소의 자손요소들에 적용됨.
2.
- 기본값: auto
- 상속여부: O
- 애니가능: X
- CSS버전: CSS3
- JS구문: object.style.imageRendering="pixelated";
3.
IE7 이상 주요 최신 브라우저 모두 지원. (단, IE 경우 부분 지원)
- Chrome, Edge, Opera, Safari 브라우저는 crisp-edges 속성값에 대해 대체 이름인 -webkit-optimize-contrast 사용.
4. MDN image-rendering 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
image-rendering 구문
selector {image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;}
[매개변수]
auto
브라우저가 크기 조정 알고리즘을 자동 선택. (기본값)
smooth
크기 조정 시, 이미지 색상을 부드럽게 하는 알고리즘 사용.
high-quality
smooth 방식과 유사하나, 좀 더 고품질 사용.
crisp-edges
이미지의 대비와 가장자리를 유지하는 알고리즘 사용.
pixelated
이미지 크기 확대 시 최근접 이웃 알고리즘이 사용되므로 이미지가 큰 픽셀로 구성된 것처럼 나타남. / 이미지 축소 시 auto 방식과 동일.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
