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

Question

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

http://greendental.mediaworksonline.com/

我已经为此绞尽脑汁了 2 天。如果您能提供帮助，我们将不胜感激。我正在构建它以仅使用 css 而不是 jquery。

Answer 1

一个快速的解决方案可以放不同的分辨率，一个例子

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

希望对你有帮助