는

Question

을 srcset I 다음 laravel 코드를 가지고 :

<img sizes="(min-width:600px)100vw, (max-width:601px)100vw" 
     srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" /> 

난 할 노력하고있어하는 폭 < 600PX에 대한 600 × 600 이미지, 폭> 600PX에 대한 410x620을 표시하는 것입니다.

위의 코드는 데스크톱에서 작동합니다. 하지만 iPhone (iOS 8.1.2, safari/chrome)에서는 410x620 이미지가 대신 표시됩니다. IE9 - IE11을 제외한 Picturefill 없이는 제대로 작동합니다 (데스크톱과 모바일 모두).

여기에 누락 된 것이 있습니까?

솔루션 :

<picture> 
    <!--[if IE 9]><video style="display: none;"><![endif]--> 
    <source srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" media="(max-width: 600px)"> 
    <source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" media="(min-width: 601px)"> 
    <!--[if IE 9]></video><![endif]--> 
    <img sizes="100vw" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" /> 
</picture> 

Answer 1

여러 오류가 있습니다

1. sizes="(min-width:600px)100vw, (max-width:601px)100vw"

   이 크기의 기본값은 100vw 어떤 의미 하지 않습니다. 최대 너비 : 601px가 100vw를 사용하는 경우 최소 너비 : 600px가 일치하면 100vw가 사용됩니다. 그렇지 않으면 100vw를 사용하십시오.

2. 410 픽셀 너비의 이미지에 설명자 601w을 설정했습니다. 이것은 잘못된 것입니다.

3. 나도 몰라,하지만 당신은 다른 크기로 같은 이미지를 사용하지 않는 것 같지만, 당신은 2 개의 다른 이미지를 사용합니다. 하나는 600x600이고 다른 하나는 410x620입니다. 이것은 브라우저가 선택할 수있는 다른 후보를 제공하고 싶지 않다는 것을 의미합니다. 즉, 레이아웃에 따라 다른 이미지를 원한다는 의미입니까? 그리고 그 경우에 당신은 picture

<picture> 
    <source media="(min-width:600px)" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" /> 
    <source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" /> 
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /> 
</picture>