如何使背景图像响应

Question

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

1. 主页上的滑块图像是如何响应的？是通过JavaScript或使用纯CSS。
2. 另外我想知道文字在滚动时向上移动，留下完整的背景图像？如何达到同样的效果。

我知道这可能是基本问题，但我发现通过源代码很难知道因为有很多javascript和css文件。

此致 普拉迪普

Answer 1

看一下background-size属性。 您可以将background-size设置为任何px或％值或使用常量： 封面会调整图片大小以填充整个容器，而包含尝试将图片放入容器内而不进行裁剪，很可能会留下容器的某些部分而没有任何背景

您可能想要的是将背景大小属性设置为覆盖。

Answer 2

您只需将图片设置为％到css所需的百分比，例如：

.slider img {
   width:100%;
}

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

Answer 3

如果你想为更长的设备设置响应高度，那么使用宽度：100％;和身高：100％;另外明智的你可以使用身高：自动;制作div并保留它的背景大小属性。