延迟加载在图像下留下巨大空白 - CSS高度问题

Question

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

当我向下滚动页面时，经过页面折叠后，所有帖子网格博客项目上的图像下方似乎都留有很大的间隙。

我找到了修复/黑客，我应用了一个强制高度： -

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

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

有没有更好的替代方法来做这里，而不是强迫高度然后必须做一堆其他媒体查询？

Answer 1

您不应指定任何图像的高度。请尝试使用以下代码。

.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:;
    }

}