2017-02-26 6 views
0

나는> 작은 이미지를 표시응답 이미지가 예상대로 작동하지 srcset 것은

0-600px 다음과 같은 느슨한 요구 사항과 full screen responsive image solution을 구현하기 위해 노력하고
601-900px>
901-2000px>는 대형 디스플레이 매체 이미지를 표시
아이폰 6> 414x736
시오>는 768x1024

,617,451 : 화상
파고 조금 후에

난에 대한 치수와 함께 작동하도록 결정 515,

난 각 화면 크기 (아트 방향 목적)에 별도의 화상을 생성하고 다음 srcset 코드

<img src="/assets/images/414X736/artGallery.jpg" 
     srcset="/assets/images/414X736/artGallery.jpg 414w, 
       /assets/images/768x1024/artGallery.jpg 768w, 
       /assets/images/1920x1080/artGallery.jpg 1920w"> 

사용 이미지 는 (그래서 배경처럼 동작 : 커버) 다음 CSS가

img { 
    display:block; 
    height:100vh; 
    width:100vw; 
    object-fit:cover; 
} 

나는 내 바탕 화면 모니터는 작은 크기, 전체 화면까지 크기 조정, 적절한 장소

,536,913에서 대체 이미지 63,210

는하지만, 내 휴대 전화와 태블릿, 그것은 지속적으로 srcset의 작은

나의 이해에 큰 큰 작은에서 브라우저 창을 확장 할 때 나는 이미지를 대체 값 싶습니다

이상적으로 1920 이미지를 보여 주었다 그것이 가장 큰 이미지를 장전 후에는 아트 디렉션의 어떤 종류를 확인하려면, 그것은 당신을 작은 것들

도움말 및

+0

망막 디스플레이에서 장치 픽셀 비율이 –

답변

0

감사 제안을로드하지 않습니다 <picture> inste를 사용할 필요가입니다 srcset-w의 광고

그런데 코드에 sizes 속성이 누락되었습니다. srcset 특성을 w 설명자와 함께 사용하는 경우 필수입니다.

+0

이므로 항상 최대 크기의 이미지를로드합니다. 브라우저를 지정하지 않으면 필수는 아닙니다. 브라우저는 sizes = "100vw"를 사용합니다. –

+0

[HTML5 사양] (https://html.spec.whatwg.org/multipage/embedded-content)에 "srcset 속성에 너비 설명자를 사용하는 이미지 후보 문자열이있는 경우 sizes 속성도 있어야합니다"라고 적혀 있습니다. .html). –