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％宽度，并在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>

您是否在移动浏览器中看到了以前没有显示给您的所需行为？

艺术导演的响应图像

1 个答案: