Режиссерские образы, ориентированные на искусство

Question

Я пытаюсь изменить/art напрямую изображение на основе размера устройства и экрана - не просто изменить разрешение изображения.

Я использую элемент <picture>, и он отлично работает при изменении размеров браузеров на моем рабочем столе, но не работает на мобильных устройствах.

Код в настоящее время гласит:

<picture> 
    <source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png"> 
    <img src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”> 
</picture> 

Я понимаю, что <picture> не поддерживается на всех платформах, так что я также попытался srcset следующим образом:

<img srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png 500w, 
      http://phillipsperfections.com/images/PhillipsPerfections_Home.png 950w" 
    sizes="100vw” 
    src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”> 

Я хочу, чтобы изображение всегда будет 100%, и переключиться на другое изображение при просмотре ниже 950px.

Я ссылаюсь на код отсюда http://alistapart.com/article/using-responsive-images-now#section3, но я чего-то не хватает? Может ли кто-нибудь указать мне в правильном направлении?

Мой рабочий сайт - http://phillipsperfections.com/. Вы должны иметь возможность просматривать исходный код для всего кода.

Большое спасибо!

Answer 1

Поскольку две версии содержат различный визуальный контент, вы действительно являетесь «арт-режимом» и должны использовать элемент <picture> (а не srcset) для переключения между двумя версиями вашего изображения.

(Если бы две версии были одинаковыми, расширенными и расширенными версиями друг друга, srcset - это путь).

Наклейка <picture> выглядит правильно; в каком мобильном браузере вы не видите ожидаемую версию? <picture> Поддержка на самом деле довольно хороша в эти дни; здесь a current support matrix.

Если вам необходимо направлении для работы в старых браузерах, вам нужно будет использовать Picturefill - и, проверяя свой сайт, похоже, что вы есть! Но с некоторыми дополнительными цитатами, которые предотвращающие скрипт загрузки:

<script src="“http://phillipsperfections.com/js/picturefill.js&quot;" async=""></script> 

Если вы меняете что:

<script src="http://phillipsperfections.com/js/picturefill.js" async></script> 

Видите ли вы желаемое поведение в мобильном браузере, который не показывали его вы раньше?