하나의 이미지만을 사용하여 망막이 보이는지 확인하십시오.

제목이 말합니다. 이미 망막에 적합한 하나의 그림 만 사용할 수 있습니까? 그렇지만 망막 화면을 사용하지 않을 때는 망막이 아닌 그림으로 자동으로 크기가 조정됩니다. IE에서이 문제가 발생했습니다 (그리고 저는 PC를 사용하고 있습니다). 내 사진은 Chrome, Opera, Moz 등과 같은 다른 브라우저에서 훌륭하게 보입니다. 그러나 IE에서 같은 그림을보고있을 때는 "못생긴 가장자리"가 있습니다.하나의 이미지만을 사용하여 망막이 보이는지 확인하십시오.

나는이 blogpost을 보았지만 두 장의 그림/이미지를 사용하고 있습니다. 나는 그것이 가능하다면 그것을 원하지 않는다.

var retina = window.devicePixelRatio > 1; 

if (retina) { 
    var html = '<img src="my-high-res-image.jpg">'; 
} 
else { 
    var html = '<img src="my-low-res-image.jpg">'; 
}

더 구체적으로 : 내 이미지 인 경우 500x500을 말할 수 내 CSS에서 나는 때문에 망막 화면의 100 × 100 픽셀로 축소. 그러나 스크린이 망막이 아니고 축소 된 500x500 크기의 그림을 사용하면이 "바삭한 가장자리"를 갖게됩니다.

내 말은 Chrome과 IE (Edge)를 사용하여 동일한 그림을 두 장 찍었습니다. 아래 이미지의 원래 크기는 500x500이지만 100x100으로 축소되었습니다.

enter image description here 은 크롬

enter image description here 그래서 다시 내 질문에 내가 충분히 밝혀지지 않았다 경우 IE

는 : 나는 하나 개의 이미지를 사용하지만, 망막 일 또는하지를 말해 줄 수 필요가 주어질 때 ?

출처

2014-10-21 maverick

난 당신이 무엇을 "망막"수단에 대한 혼란 것 같아요. 브라우저별로 브라우저에서 일어나는 일이 아닙니다. –

반응이 빠른 디자인을 찾습니다. 화면 크기/픽셀 밀도에 따라 서로 다른 버전의 이미지를로드하는 라이브러리가 있습니다. –

나는 그것을 얻는다. 하지만 내 문제는 지금 망막 스크린을 사용하지 않는다는 것입니다. 내 친구 맥에서, 모든 사진은 인터넷 익스플로러에서도 IE와 함께 virtualbox를 사용할 때조차도 괜찮아 보인다. 하지만 내 화면에서는 그림이 IE에서는 보이지만 크롬, 오페라에서는 보이지 않습니다. 왜 그런가요? – maverick

IE가 브라우저에서 이미지 리샘플링을 처리하는 방식입니다. 당신은 당신의 CSS에서이를 이용하여이 문제를 해결 할 수 있어야한다 : 기본적으로

-ms-interpolation-mode: bicubic;

이 사용 -ms-interpolation-mode: nearest-neighbor;

는 리샘플링 방법은 사용중인 IE의 버전에 따라 문제를 해결할 수 스와핑.

여기에 CSS 트릭 말해야하는 내용은 다음과 같습니다

http://css-tricks.com/ie-fix-bicubic-scaling-for-images/

출처

2014-10-21 12:33:34

예, 이미 바이 큐빅을 사용하고 있습니다 ... 웬일인지, 왜 그런지 모르지만 여전히 이상하게 보입니다. – maverick

하나의 이미지만을 사용하여 망막이 보이는지 확인하십시오.

답변

관련 문제