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

问题描述 投票:0回答:1

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

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

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

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

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

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

html css wordpress lazy-loading
1个回答
0
投票

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

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

}
© www.soinside.com 2019 - 2024. All rights reserved.