Вам нужна помощь Picturefill srcset

<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" />

То, что я пытаюсь сделать, это отобразить 600x600 изображение для ширины < 600px, и 410x620 для ширины> 600px.

Приведенный выше код работает на рабочем столе. Но на iPhone (iOS 8.1.2, safari/chrome) вместо этого отображается изображение 410x620. Он работает нормально (как настольный, так и мобильный) без Picturefill, кроме IE9 - IE11.

Есть ли что-то, что мне не хватает здесь?

Решение:

<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>

источник

2015-01-09 resting

Есть несколько ошибок:

sizes="(min-width:600px)100vw, (max-width:601px)100vw" не имеет никакого смысла значение по умолчанию размеров является 100vw. Таким образом, ваши размеры вычисляются, если min-width: 600px соответствует, используйте 100vw, если max-width: 601px использовать 100vw, в противном случае используйте 100vw
Вы устанавливаете дескриптор 601w для изображения шириной 410 пикселей. Это просто неправильно.
Я не знаю, но, похоже, вы не используете одно и то же изображение разных размеров, но используете 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>

источник

2015-01-10 14:34:19

Спасибо. Но не могу ли я использовать разные изображения без тега ''? Пример в [Picturefill] (http://scottjehl.github.io/picturefill/#examples) также использует другое изображение. ' A giant stone face at The Bayon temple in Angkor Thom, Cambodia ' – resting

Не уверен, что вы имеете в виду с разными изображениями. Они используют одно и то же изображение разных размеров (точное изображение, но различное количество пикселей), но у вас другое соотношение сторон. Это означает, что у вас есть обрезка или что-то еще, а затем вам нужно использовать элемент изображения. Посмотрите здесь: https://github.com/aFarkas/respimage#markup-examples –

Я имел в виду разные файлы изображений, когда говорил другое изображение. Я попытался использовать тег '', и он работает. Благодарю. – resting

ответ

Смежные вопросы