srcset 및 크기를 사용하여 반응 형 이미지가 완전히 사라짐 느낌

Question

srcset 및 크기를 사용하여 내 사진 사이트에서 이미지를 최적화하려고 시도했지만 브라우저의 관리자가 가장 큰 이미지 크기를로드 중임을 알려줍니다. 이를 확인하기 위해 숫자로 새 이미지를 추가 했으므로 어느 크기의 이미지가로드되는지 확인할 수 있습니다.

하지만 미디어 쿼리를 어지럽히는 방법으로 문제없이 제대로 작동하지 않습니다. 내 문제는 미디어 쿼리를 잘못 쓰는 것과 관련이 있다고 생각하지만, 나는 일종의 재능이있다. 나는 내가 생각할 수있는 모든면에서 이것을 시험했다. 나는 브라우저가 더 큰 이미지를 캐싱 할 수있는 포스트를 읽었다. 그래서 여러 브라우저에서 시크릿 모드로 사용해 보았습니다.

아래와 같이 "테스트"라는 이미지는 중간 크기의 이미지를로드하지만 가장 작은 이미지는로드하지 않습니다.

다음은 제 코드 섹션입니다. href 태그에 라이트 박스에 포함 된 이미지를 사용하고 있음을 알 수 있습니다.

https://www.jeffreygelt.com/alt/에서 문제의 페이지를 볼 수 있습니다.

여기 내 코드입니다 : 당신의 열의를 들어

<a href="/alt/img/portfolio/test-1000x667.jpg" 
     data-sizes="(min-width: 880px) 1000px, 400px" 
     data-srcset=" 
      /alt/img/portfolio/test-400x267.jpg 400w, 
      /alt/img/portfolio/test-800x533.jpg 800w, 
      /alt/img/portfolio/test-1000x667.jpg 1000w"> 
     <picture> 
      <img class="img-responsive" 
       sizes="(min-width: 880px) 400px, 
         (min-width: 660px) and (max-width: 879px) 800px, 
         (min-width: 400px) and (max-width: 659px) 400px, 1000px" 
       srcset=" 
        /alt/img/portfolio/test-400x267.jpg 400w, 
        /alt/img/portfolio/test-800x533.jpg 800w, 
        /alt/img/portfolio/test-1000x667.jpg 1000w" 
       src="/alt/img/portfolio/test-1000x667.jpg" 
       alt="Asbury Park"> 
     </picture> 
    </a> 

    <a href="/alt/img/portfolio/andy-533x800.jpg" 
     data-sizes="(min-width: 880px) 533px, 395px" 
     data-srcset=" 
      /alt/img/portfolio/andy-395x593.jpg 395w, 
      /alt/img/portfolio/andy-419x629.jpg 419w, 
      /alt/img/portfolio/andy-533x800.jpg 533w"> 
     <picture> 
      <img class="img-responsive" 
       sizes="(max-width: 880px) 533px, 395px" 
       srcset=" 
        /alt/img/portfolio/andy-395x593.jpg 395w, 
        /alt/img/portfolio/andy-419x629.jpg 419w, 
        /alt/img/portfolio/andy-533x800.jpg 533w" 
       src="/alt/img/portfolio/andy-533x800.jpg" 
       alt="Andy's Portrait" /> 
     </picture> 
    </a>  

Answer 1

는 간단보기 : sizes="(max-width: 400px) 99vh, (max-width: 880px) 49vw, 285px". 당신이 이것을 이해하기를 바랍니다. (예를 들어). Lightbox보기의 경우 너비와 높이에 따라 다르므로 조금 더 복잡하며 sizes은 너비 설명자 만 지원합니다. 뷰포트 너비 및 뷰포트 높이가 제한된 이미지의 경우 vh 단위 (너비와 이미지의 가로 세로 비율)를 사용하여 이미지 너비를 계산할 수 있습니다.

당신은 여기에 더 많은 정보를 볼 수 있습니다 Can I use <picture> for both height and width-constrained images?

또한 참고 : 모든 브라우저가 이미지의 필요한 폭을 생성하는 devicePixelRatio으로 계산 된 크기의 길이를 곱있다. 브라우저 캐시에있는 경우 Chrome이 가장 큰 이미지를로드합니다.