試圖使橫幅/圖像響應

Question

http://www.otislandscapeassociates.com/about/

我正在嘗試使用橫幅（細枝的橫向圖像），但是我很難使它在各種設備（例如台式機，平板電腦，移動設備）中做出響應，而不會拉伸圖像或使其無法正確貼合或在任一端均被切斷。

我想就如何解決這個問題提出一些建議，如果我需要調整實際圖像的尺寸，它會很大嗎？ 它應該更小嗎？ 等等

我目前正在使用CSS進行所有操作，因此這是我首選的修改方法。

提前致謝。

Answer 1

你可以試試

background-size: contain;

這是使背景圖片具有響應性的最簡單方法。 但是請注意，隨着寬度隨着屏幕寬度的變化而調整，這也會使圖像的高度成比例地減小。

我可以看到您的高度已經固定並且已經使用

background-size: cover;

如果您希望它自動填充容器，無論容器的大小如何，我通常都會建議這樣做。

您不能同時擁有兩者（無論容器大小如何，都不能拉伸且始終填充）。 查看圖像（與頁面融合的空白，並假設它是必不可少的），我建議您將其添加到類中，以使其保持響應狀態，但始終將設計固定在div的底部，以便始終將其融合到白色以上。 讓我知道您是否需要任何澄清或問題

background-position: center 100%;