2009-05-16 12 views
3

내 페이지에는 아래 예와 같은 이미지가 포함되어 있습니다. 이미지의 너비는 브라우저에 따라 다르며 너비는 자동으로 변경됩니다 (이와 유사).IE에서 이미지 크기 조정

이 이미지는 IE (IE7 및 IE6에서 테스트 한 것)를 제외한 모든 브라우저에서 크기가 조정 된 후에 멋지게 보입니다. IE 이미지에서보기 흉한. 일부 부품은 있어야하는 것보다 두껍고 일부 부품은 더 얇습니다.

alt text http://img39.imageshack.us/img39/7202/88017917.png

가 나는 스무딩를 사용하지 않는 IE에 의한 것으로 거의 확신합니다. 하지만이 불편한 문제를 해결하는 방법을 궁금해합니다.


나는이 코드가 제대로 작동하지 않는다. 그러나 ie6를 위해 그것을 고치는 방법?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
    img { -ms-interpolation-mode:bicubic; } 
    </style> 
</head> 
<body> 
    <div style="width: 50%;"> 
    <img src="pp.jpg" width="100%"> 
    </div> 
</body> 
</html> 

From flickr devs:

IE 6은 위험한 제안이지만 쇼 리사이징 이미지를 개선 할 수 AlphaImageLoader의 CSS 필터 이인가되는 경우, 동일한 필터는 일반적으로 적절 와 PNG 파일을 표시 사용 알파 투명도. 예 : 필터 : progid : DXImageTransform.Microsoft.AlphaImageLoader (src = '/ path/to/image.jpg', sizingMethod = 'scale') ;. 여기서 적용 할 투명도가 인 반면 크기 조정 방법을 적용하면 의 품질이 향상됩니다.

아직 작동하지 않습니다. 필터를 실제로 사용하지 않았습니다. 아무도 나에게 작업 코드를 줄 수 있습니까?

+0

이미지 크기를 조정하려면 브라우저를 사용하면 일관된 결과를 얻을 수 없습니다. – Nik

답변

1

Unstoppable Robot Ninja에는 더 많은 정보와 함께 IE6과 IE7에서 작동하도록하는 기사가 있습니다.

문제는 IE와 관련이 없지만 플랫폼에 따라 다릅니다. 파이어 폭스, 사파리 등은 모두 네이티브 윈도우 스케일링보다 훨씬 부드럽게 확장되는 자체 렌더링 엔진을 사용합니다.

CSS 선언 또는 JavaScript 코드를 Conditional Comments에 추가하는 것이 좋습니다. 따라서 IE가 아닌 브라우저는 추가 코드를 다운로드하거나 다른 요청을 할 필요가 없습니다. 이것은 또한 CSS를 깨끗하고 유효하게 유지합니다.

+0

이것은 그 것이다! 감사! – Roman

5

Spolsky 조엘 최근에이 블로그에이 문제를 해결하기위한 방안을 게시 : http://www.joelonsoftware.com/items/2008/12/22.html

을 CSS에 다음에 추가

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

가장 좋은 방법은 확장 할 필요가없는 이미지를 사용하는 것입니다 브라우저에 의해, 그러나 CSS Joel는 큰 개선을 제안합니다.

+0

흠 .. 노력했는데 작동하지 않습니다. (아무도 나에게 예제를 줄 수 있습니까?) – Roman

+0

IE6을 사용해 보길 편리하지 않지만 Joel의 기사를 보았습니다. 그것이 나를 위해 일하는 것을 알았다. – RichieHindle

+0

@ RichieHindle : 필터를 사용하지 않고 ie7에서 작동하기 때문에 (예 : 조엘이 참조를 준) 원본 기사를 본 적이 있습니다. – Roman