艺术指导的响应式图像

Question

我正在尝试根据设备和屏幕尺寸更改/艺术指导图像，而不仅仅是更改图像的分辨率。

我正在使用<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% 宽度，并在查看 950 像素以下时切换到不同的图像。

我从这里 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>

您是否在移动浏览器中看到了之前未向您显示的所需行为？