Html 惰性负载在图像下留下巨大间隙-CSS高度问题

我有一个wordpress博客，安装了一个名为BJ lazy load的延迟加载插件。我也在使用AVADA主题

当我向下滚动页面时，经过页面折叠后，所有post grid博客项目的图像下方似乎留下了一个很大的间隙

我已找到修复/破解，其中我应用了强制高度：-

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img {
    height: 230px; !important;
}

这很好，但很明显，当我缩小页面，或者在不同的设备上查看时，图像会被拉伸

---

有没有比强制设置一个高度然后对一堆其他媒体查询执行此操作更好的替代方法？

您不应该为任何图像指定高度。请尝试以下代码

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
{
    width: 100%;
    height:auto;
} 

否则，请尝试使用媒体查询并定义高度

@media all and (max-width:1199px){

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }

}

@media all and (max-width:991px){

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }

}

@media all and (max-width:768px){

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }

}

@media all and (max-width:480px){

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }

}

@media all and (max-width:380px){

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }

}

@media all and (max-width:320px){

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }

}

---

是的，代码已经有了你的建议，只是看起来延迟加载插件不能很好地处理这个主题。虽然我尝试过很多其他插件，但都是一样的。如果我强制设置一个高度，这没问题，但是我必须做这么多的媒体查询，只是看起来非常粗糙，不好。我能看看你的div结构吗？。分享你的链接，我会试试吗？