Handlingaspectratiooflazyloadingimageswithdifferentdimensionstoavoidcontentjump

在padding-top: calc(height / widht * 100%); I 的帮助下， 我可以处理延迟加载的图像以避免内容跳转。

但是，仅当所有图像都在同一尺寸上时，此解决方案才能完美工作。

渲染不同尺寸的图像时如何处理内容跳跃？

仅供参考：对于延迟加载图像，我正在使用lazysizes

.wrapper {
  position: relative;
  height: 0;
  padding-top: calc(100 / 411 * 100%);
}

.wrapper_img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

  
  
  



  

    
Test 001

    

      

        
      
    

    Test 002

    

      

        
      
    

    Test 003

    

      

        
      
    

    Test 004