망막 디스플레이 용 이미지 크기 조정

Question

망막 디스플레이를 위해 이미지의 크기를 조정하는 방법을 찾으려합니다. 배경 이미지가 아니거나 다른 이미지를 사용하지 않아도됩니다.

나의 계획은 800x600 px 이미지를 사용하는 것이며, 일반 디스플레이의 경우 400x300으로 샘플링하는 것이지만, 망막의 경우 800x600으로 유지하지만 픽셀 밀도를 두 배로 유지하면 400x300을 보여주는 것처럼 보이지만 두 번 픽셀 밀도.

CSS에서이 작업을 수행 할 수있는 방법이 있습니까?

내가 얻을 수있는 가장 가까운이 같은 망막 비율을 찾는 것이다

@media only screen and (-webkit-min-device-pixel-ratio: 2) {} 

하지만 어떻게 이미지를 효과적으로 망막에 그것을 절반 크기을 두 번 픽셀 밀도에 표시 할 수 있도록?

Answer 1

아마도이 망막에서 Retina.js를 사용하게 될 것입니다. 망막 전용 미디어 쿼리를 처리하는 데 유용한 다양한 도구가있는 것 같습니다.

여기 링크의 : http://imulus.github.io/retinajs/

그럼에도 불구하고, 그것은 CSS 거래의 방법이 아니다, 당신은 여기에 자바 스크립트에게 사랑의 조금을 제공해야 할 것이다.