2

似乎不是为每个图片源计算纵横比，而是从 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 宽度配置文件，而不是根据元素的实际宽度计算大小。

4

0 回答 0