如何使背景图像响应

Question

我从一开始就承认我是UI开发的新手，最近开始学习。 我正在开发一个类似于InuitLabs.com的网站。 当我使用视图源查看源代码时，我完全迷失了。 我特别想知道

1. 主页上的滑块图像如何响应？ 是通过javascript还是使用纯CSS。
2. 我还想知道文本在滚动时会向上移动，而完整保留背景图像吗？ 如何达到同样的效果。

我知道这可能是基本问题，但是由于存在许多JavaScript和CSS文件，因此我很难通过源代码来了解它。

问候，Pradeep

Answer 1

看一下background-size属性。 您可以将background-size设置为任何px或％值，也可以使用常量： Cover会调整图像大小以填充整个容器，同时包含尝试使图像适合容器内部而不会裁剪的情况，很可能使容器的某些部分没有任何背景。

您可能想要的是将background-size属性设置为cover。

Answer 2

您只需通过CSS将图像设置为所需的百分比，例如：

.slider img {
   width:100%;
}

编辑：如果您不想丢失图像比例，还需要将高度指定为自动。 如果将宽度和高度设置为100％，则图像比例会混乱。

Answer 3

如果您还要为更长的设备设置响应高度，则使用width：100％; 高度：100％； 否则，您可以使用height：auto; 使div并为其保留background-size属性。