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 (将#修改为@）