Question

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

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

我找到了修复程序/ hack，在其中我施加了以下强制高度：-

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

}

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

1 个答案: