IE7 이상에서 이미지 리사이즈시 예쁘게 -ms-interpolation-mode Attribute | msInterpolationMode Property

 

http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx

http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=69784&page=&sfl=&stx=&spt=&page=&cwin=


요약:

IE7이상에서 사용할 수 있습니다.
이미지 리사이즈 때의 리사이즈 방법을 정의할 수 있습니다.

bicubic으로 설정하면 좀더 나은 리사이즈를 보여줍니다.

  • 원본
     

  • 일반리사이즈

  • 적용됨(-ms-interpolation-mode:bicubic)

  • 적용됨(-ms-interpolation-mode:nearest-neighbor)

  • 참고
    FF나 다른 브라우저는 알아서 예쁘게 보여줍니다.


-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 one 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 only. 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> 
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📅 달력형