img srcset - 픽셀 밀도 무시 - 우수한 라이브러리

두 이미지가 있는데, 하나는 1000 x 800 픽셀 ("큰")이고 하나는 200 x 200 픽셀 ("작은")입니다. 은 I 화면보다 작거나 넓은 CSS 500 개 화소 일때 작은 화상을 표시 srcset에게/크기/picturefill을 사용할와 달리 큰 이미지. http://jsfiddle.net/ghhjfo4z/1/embedded/result/img srcset - 픽셀 밀도 무시

<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w">

이 제 1 배 픽셀 밀도 화면에 잘 작동 :

는 여기에 허수아비 제안합니다. 그러나 내 2 배 픽셀 밀도 망막 디스플레이로 전환하면 뷰포트가 250 CSS 픽셀보다 작거나 같은 경우에만 작은 이미지가 갑자기 표시됩니다.

뷰포트가 500px보다 작거나 같을 때 브라우저가 내 2x 픽셀 밀도 디스플레이에서 작은 이미지를 사용하도록 할 수있는 방법이 있습니까?

기본적 I는 장치의 화소 밀도를 무시하고 단지 뷰포트 CSS 화소의 폭에 기초하여 화상을 선택 srcset 및/또는 크기 사용할.

출처

2014-11-26 mark

좋은 질문 : 나는 나를 위해 일하는 다음과 같은 해결책을 발견! 왜 이것이 더 광범위하게 논의되지 않는지 나는 알지 못한다. srcset의 주요 포인트 중 하나는 대역폭을 줄이는 것이지만, 대부분의 예제를 통해 1000 픽셀 이상의 이미지를 가로 방향으로 iPhone으로 푸시합니다. 가야 할 길 같습니다. –

간단히 말해서 이것은 불가능합니다. 더 많은 컨트롤을 원한다면 picture 요소를 사용할 수 있습니다.

<picture> 
    <source srcset="img-500w.jpg" media="(max-width: 650px)" /> 
    <img srcset="img-1000w.jpg" /> 
</picture>

흥미로운 lazySizes plugin for you, optimumx도 있습니다. 마크 업이과 같습니다

<img 
    data-srcset="http://placehold.it/300x150 300w, 
     http://placehold.it/700x300 700w, 
     http://placehold.it/1400x600 1400w, 
     http://placehold.it/2800x1200 2800w" 
    data-sizes="auto" 
    data-optimumx="1.5" 
    class="lazyload" 
    src="http://placehold.it/300x150" 
    alt="flexible image" />

여기 봐 1.2 이상 1.5 대신 다른 performance vs. retina considerations 단지 1

로 설정하는 것이 현명 할 것이다. 그냥 완료

출처

2014-11-26 13:15:30

는 :

<img 
    srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, 
     http://i.imgur.com/BgLoqRx.jpg 500w" 
    sizes="(-webkit-min-device-pixel-ratio: 2) 50vw, 
     (min-resolution: 192dpi) 50vw, 
     (min-resolution: 2dppx) 50vw, 
     (-webkit-min-device-pixel-ratio: 3) 33.33vw, 
     (min-resolution: 288dpi) 33.33vw, 
     (min-resolution: 3dppx) 33.33vw" />

출처

2018-01-30 16:31:34

img srcset - 픽셀 밀도 무시

답변

관련 문제