如何使用图片填充

How to use Picturefill

本文关键字：填充 何使用      更新时间：2023-09-26

我正在尝试使用pictufill为我的网站，但两个版本似乎都不起作用。

In my head of the page:

<script src="js/picturefill.js"></script>

我有两个图像，大的是welcome.jpg，小的是welcome_sm.jpg:

<span data-picture data-alt="Welcome to Novus Landscapes">
<span data-src="images/welcome_sm.jpg"></span>
<span data-src="images/welcome.jpg" data-media="(min-width: 58em)"></span>
<noscript>
<img src="images/welcome_sm.jpg" alt="Welcome to Novus Landscapes">
</noscript>
</span>

我还需要做什么才能让它工作吗?我没有看到任何东西，因为Javascript在我的浏览器上是启用的，这当然消除了由于noscript标签的回退。

我做错了什么?

我的网站是novuslandscapes。com

谢谢,约翰

你需要做几件事。

  1. 阅读或观看

  2. 将脚本放在html的底部，就在</body>

    3. 之前

试试这个语法，从这里复制

<article>
<img
     src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/small.png"
     srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/large.png 1280w,
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/medium.png 640w,
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/small.png 320w"
     sizes="(min-width: 500px) 50%, 100%"  
     alt="A woman reading">
</article>
相关文章：