누구나 내가이 srcset에 잘못 될 것을 볼 수 있습니까?

나는 반응이 좋은 Wordpress 웹 사이트를 만들고 있습니다. 블로그 피드에는 제목과 이미지가있는 이야기 목록이 있습니다. - 140x140px (이야기가 목록에 표시됩니다) 누구나 내가이 srcset에 잘못 될 것을 볼 수 있습니까?

480 픽셀 이상 넓은 - 360x190px (3 행에 표시됩니다 층)

최대 폭 479px에 다음과 같이 이미지 크기가되어야한다
나는 SRCSET을 사용하여 140x140px 이미지를 브라우저 용으로 최대 479px로드하고 360px 이미지를 480px 이상의 브라우저 용으로로드하려고 노력해 왔습니다.

나는 봤 거든 말 그대로 크기와 srcset에 문서의 모든 비트를 읽고 있지만 난 단지 주위에 내 머리를 얻을 수 없습니다. 지금까지 나는 다음과 같이 왔어요 :
```
<img 
 
    src="http://placekitten.com/140/140" 
 
    srcset=" 
 
    http://placekitten.com/140/140 140w, 
 
    http://placekitten.com/360/190 360w" 
 
    sizes=" 
 
    (max-width: 479px) 140px, 
 
    (min-width: 480px) 360px, 
 
    100vw" 
 
    alt="" 
 
    class="lazyload" 
 
/>
```
불행하게도이 모든 이미지가 140x140px 이미지로 설정되는 실제 SRC에도 불구하고, 각 폭의 360x190px를 표시입니다 않습니다.

누구든지 내가 놓친 것을 볼 수 있습니까? 나는 그것이 내가 가장 혼란스러워하는 크기라고 생각한다. 문서화 된 것과 같은 미디어 쿼리를 추가했지만 적용되지 않는 것 같습니까?

감사합니다.

출처

2017-10-20 Ali Green

이 ** 생성 된 마크 업을 공유하십시오. PHP는 서버 측 언어이므로 코드 스 니펫으로 렌더링 할 수 없습니다. – Terry

안녕하세요. 내가 placekitten 이미지를 사용하도록 업데이 트했지만 그것이 효과가 있을지 모르겠다? 코드가 로컬에서 실행되기 때문에 코드는 내가 작업 한 것의 예일뿐입니다. –

어떤 브라우저를 사용하고 있습니까? 문제의 코드가 나를 위해 일하고 있습니다. –

참고. 이 전략은 브라우저의 대역폭을 절약하기위한 것입니다. 따라서 넓은 뷰포트로 시작하면 브라우저는 두 이미지 중 더 큰 이미지를 가져오고 크기를 조정하더라도 더 작은 이미지로 폴백합니다.

당신은 다양한 뷰포트 중단 점에서 이미지를로드 브라우저를 강제로 대신 <picture>을 사용하려면 : **

<picture alt="" class="lazyload"> 
 
    <source srcset="https://via.placeholder.com/360x190" media="(min-width: 480px)" /> 
 
    <img src="https://via.placeholder.com/140x140" /> 
 
</picture>

출처

2017-10-20 14:30:31 Terry

답장을 보내 주셔서 감사합니다. 불행히도 테스트를 위해 해당 코드를 복사하여 붙여 넣으려고했지만 내 브라우저가 479px 미만일 때 360px 와이드를 표시합니다. 이것이 내가 논리적으로 생각한대로 - 최대 479px로 140px 이미지를 사용하고, 480px 이상은 360px 이미지를 사용하지만 무시하는 것처럼 보인다. 시크릿 모드를 사용해 보았지만 캐싱은 있지만 운이 없었습니다. –

@AliGreen 작동하지만 더 낮은 해상도에서 먼저 테스트하고 캐시를 지워야합니다.브라우저가 그림의 고해상도 버전을 가지고있을 때, 뷰포트를 축소 한 후에도 더 작은 이미지로 크기를 줄이는 것을 원하지 않을 것입니다. – Terry

나는 망막 전문가 인 MacBook 프로를 테스트 중입니다. 2 배 해상도가 맞습니까? 그게 문제 일 수 있다고 생각했는데 130px 너비 (반응 형 도구 사용)에서 크롬을 확인했지만 여전히 360px 너비로 나오고 있습니다. - 매우 이상합니다! https://imgur.com/a/RVLjx –

아래 코드를 확인하십시오.

<picture> 
 
       <source class="img-fluid" srcset="//www.fillmurray.com/140/140" media="(max-width: 479px)"><img class="img-fluid" src="//www.fillmurray.com/360/190"> 
 
      </picture>

<img> 요소에이 srcset 전략 브라우저가 아직 이미지를 캐시하지 사실에 따라 달라

출처

2017-10-20 14:27:00 izulito

누구나 내가이 srcset에 잘못 될 것을 볼 수 있습니까?

답변

관련 문제