如何使背景圖像響應

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屬性。