响应 - css视差类型 - 图像不在容器内

Question

我正在尝试构建一个具有基本css“视差”效果的网站，其中图片具有background-attachment:fixed并在滚动时停留在那里。代码background-size:cover在大型浏览器中运行良好，但我注意到当我将屏幕缩小，尺寸为800px或900px时，div中的图像会被切断，我只看到一点图像。我已经将改变背景附件改为background-attachment:contain - 当我这样做时，图像在div中完美显示，但我看到图像下面有一个巨大的空间。

http://greendental.mediaworksonline.com/

我已经在这上面了两天。如果你能提供帮助，那将非常感激。我正在构建这个只是使用css而不是jquery。

Answer 1

快速解决方案可以使用不同的分辨率，例如

@media screen and (max-width: 900px) {
    .imgblock {     
        min-height:400px;           
    }
}
@media screen and (max-width: 400px) {
    .imgblock {     
        min-height:200px;                   
    }
}

希望这可以帮到你