具有视差效果的图像尺寸问题答案

【问题标题】：Image size issue with parallax effect具有视差效果的图像尺寸问题
【发布时间】：2015-03-24 19:55:14
【问题描述】：

我遇到了背景附件问题：已修复。当我使用此属性时，图像尺寸会变大。

如何使用视差效果保持图像大小正常比例。

代码：

<div class="full_width full-bg">
    <div class="contact-banner ratio4_1"></div>
</div>
<div style="margin-top:3rem;"></div>
<div class="full_width full-bg">
    <div class="contact-banner ratio4_1 parallax"></div>
</div>

演示：https://jsfiddle.net/squidraj/w7rxv5xj/embedded/result/

编辑：http://jsfiddle.net/squidraj/w7rxv5xj/

我想将图像大小保持为第一个，但想应用视差效果。

非常感谢任何帮助。提前致谢。

【问题讨论】：

标签： html css

【解决方案1】：

为.parallax 类设置background-size: 100% auto

.parallax {
   background-attachment:fixed;
   background-size: 100% auto;
 }

分叉：http://jsfiddle.net/r7oyxL92/

【讨论】：

我尝试使用 100% auto，但在这种情况下，底部会留下一些空白，当您滚动时，您可以看到容器顶部的空白。但是，如果我使用背景尺寸封面，那么我看不到空白，但图像似乎更大。
对不起我的错误。横幅图像本身的高度很短。我太傻了。非常感谢您的帮助。