[image] CSS - image-rendering 속성 - 크기 조정 가능 이미지의 렌더링 방식 지정 (= image-rendering속성 = 이미지렌더링속성) ※ 이미지 크기 조정 알고리즘 선택

1. image-rendering 예제 - 크기 조정 가능 이미지의 렌더링 방식 지정
2. image-rendering 정의
3. 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

부모요소의 속성값 상속.