JAKARTAPROJECT
JAKARTA TIPJSP TIPJSP 질문&답변DATABASE TIPJAVASCRIPT TIPWEBHACKING TIP기타 TIP
자바스크립트 팁
자바스크립트 팁
자바스크립트 및 CSS 팁 게시판입니다
이미지 부드럽게 줄이기
GoodBug http://www.jakartaproject.com
이미지 슬라이더 보기

이미지 사이즈 줄일 시 IE에서 이미지 안깨지고 자연스럽게 줄이기

 

 

img { -ms-interpolation-mode: bicubic; }

 

 

IE7 이상에서만 에만 적용 됩니다

 

1. 원본 이미지

 

2. 그냥 사이즈만 줄이기

 

3. img { -ms-interpolation-mode: nearest-neighbor; } 적용

 

4. img { -ms-interpolation-mode: bicubic; }  적용

 

 

-ms-interpolation-mode Attribute | msInterpolationMode Property

Sets or retrieves the interpolation (resampling) method used to stretch images.

Syntax

HTML { -ms-interpolation-mode : sMode }
Scripting [ sMode = ] object.style.msInterpolationMode [ = v ]

Possible Values

sMode String that specifies or receives XXone of the following values.
nearest-neighbor
Always use nearest neighbor interpolation mode.
bicubic
Always use high-quality bicubic interpolation mode.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has no default value. The Microsoft Cascading Style Sheets (CSS) extension is not inherited.

Remarks

msInterpolationMode was introduced in Windows Internet Explorer 7.

The msInterpolationMode property applies to stretched images XXonly. For example, if the natural width of the image is 200x200 but the page designer specifies that the height and width should be 400x400, then the image will be stretched to the new dimensions using the nearest-neighbor algorithm, unless otherwise specified.

If the zoom level of the page is 100%, the default interpolation is nearest-neighbor, otherwise bicubic mode is used.

Example

The following example applies the -ms-interpolation-mode attribute to determine the resampling algorithm of stretched images. The sample requires Internet Explorer 7 or later to view.

 

소스코드
<html>
<head>
<style>
img.highqual { -ms-interpolation-mode:bicubic }
img.nearestn { -ms-interpolation-mode:nearest-neighbor }
</style>
</head>
<body>
<img src="sphere.jpg" width="175" height="350" class="nearestn">
<img src="sphere.jpg" width="175" height="350">
<img src="sphere.jpg" width="175" height="350" class="highqual">
<p>Change the zoom level of the page to see the difference.</p>
</body>
</html> 
 
2011-09-06 16:17:15
112.216.206.***

 

좋은생각 ^^

0점 (1명)
덧글 0개 | 태그 1개 | 관련글보기
태그입력
쉽표(,)구분으로 한번에 여러 태그를 입력할수 있습니다
img (1)
이름 비밀번호
자바스크립트 팁
자바스크립트 및 CSS 팁 게시판입니다
! 번호 제목 글쓴이 일자 조회
img 이미지 부드럽게 줄이기 1 GoodBug 2009-12-18 8,158
219 rss xml 파싱하는 모듈 입니다. 1 고고싱 2009-11-27 7,610
218 트리 입니다 . 1 고고싱 2009-11-27 5,846
217 에러처리 1 kaiser 2009-05-11 6,060
216 웹페이지 복사 방지 해지 하는 법 kaiser 2009-05-03 11,645
215 javascript 한글 짜르기 1 1 kaiser 2008-08-14 7,953
214 rolling 롤링 스크립트 1 2 GoodBug 2008-07-11 10,102
213 alert 메시지를 print 처럼 사용하기 2 고고싱 2008-06-10 8,642
212 onload onload 펑션이 정의되어 있는 상황에서 onload에 추가하기 1 GoodBug 2008-04-11 8,417
211 javascript 자바스크립트 개발가이드 4 1 kaiser 2008-04-09 8,866
210 escape HTML escpae code 1 GoodBug 2008-04-02 6,471
209 optgroup SELECT 목록 그룹별로 묶기 1 1 GoodBug 2008-03-06 8,191
208 동적 테이블 테이블에 동적 TR 삽입 및 삭제 IE, FF 공용 1 GoodBug 2008-01-18 11,717
207 drag Javascript drag and drop 1 1 GoodBug 2008-01-16 8,136
206 sort Sortable HTML table 2 GoodBug 2008-01-16 7,375
205 scrollable table Scrollable HTML table 1 GoodBug 2008-01-16 7,057
204 CSS CSS centered layout 1 1 GoodBug 2008-01-16 6,656
203 utf8 Javascript UTF-8 1 GoodBug 2008-01-16 7,885
202 encode Javascript url decode, encode 2 GoodBug 2008-01-16 8,099
201 암호화 Javascript MD5 2 GoodBug 2008-01-15 7,335
copyright 2005-2018 by Unicorn