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

Question

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

当我向下滚动页面时，经过页面折叠后，所有帖子网格博客元素的图像下方似乎都留下了一个大空隙。

我找到了修复/破解方法，我在其中应用了强制高度:-

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

效果很好，但很明显，当我缩小页面或在不同设备上查看时，图像会被拉伸(stretch)。

这里是否有比强制高度然后必须为一堆其他媒体查询执行此操作更好的替代方法？

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

}