1

需要帮助/正确的方法来使用lazysizes-aFarkas 在图片元素中实现响应式图像和多种文件格式。示例代码如下：

<picture>
 <source data-scrset="example.jpg" type="image/jpeg" media="(max-width: 736px)"/>
 <source data-scrset="example.webp" type="image/webp"/>
 <img class="lazyload" data-src="example.png" type="image/png" alt="fallback"/>
</picture>

感谢任何帮助:)

4

1 回答 1

0

尝试这个 ：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}
</style>
</head>
<body>
<img class="responsive" src="https://via.placeholder.com/600x400.webp" alt="PlaceHolder" onError="this.onerror=null;this.src='https://via.placeholder.com/600x400.png';" />
</body>
</html>

这里还有JSFiddle。来测试它。

于 2021-05-16T19:03:47.560 回答