如何解决lazysizes-使用{width}和{height}占位符时,宽高比不适用于源
似乎并不是针对每个图片来源都计算出宽高比,而是仅从img标签本身获取的。这样会阻止插件在具有不同长宽比的美术指导模式下工作。
img {
width:100%;
max-width:100%;
display:block;
}
.image{
max-width:100%;
margin:auto;
}
@media screen and (min-width: 550px) {
.image{
max-width:70%;
}
}
@media screen and (min-width: 800px) {
.image{
max-width:80%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/plugins/rias/ls.rias.min.js"></script>
<div class="image">
<picture>
<!--[if IE 9]><audio><![endif]-->
<source data-src="https://placehold.it/{width}x{height}/FF0000/fff"
media="(min-width: 800px)" data-aspectratio="1.3"/>
<source data-src="https://placehold.it/{width}x{height}/ff8c00/fff"
media="(min-width: 550px)" data-aspectratio="0.75"/>
<source
data-src="https://placehold.it/{width}x{height}/FFFF00/000000"
media="(min-width: 300px)" data-aspectratio="1" />
<!--[if IE 9]></audio><![endif]-->
<img
src="https://placehold.it/100"
data-src="https://placehold.it/{width}x{height}/CCCCCC/FF0000"
data-sizes="auto"
data-widths="[1000,800,600,500,400,300]"
class="lazyload"
data-aspectratio="0.666666"
alt="" />
</picture>
</div>
查看正在运行的代码: https://jsfiddle.net/roberthenniger/o6qzsh9m/
想知道这是预期的行为还是配置错误。尚不清楚如何将数据视差用于响应图像以及宽度计算。
检查了lazysizes文档和其他链接,例如:
似乎lazysizes总是选择1000x宽度配置文件,而不是根据元素的实际宽度来计算大小。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。