試圖讓旗幟/圖像響應

Question

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

我的橫幅（樹枝的景觀形象）的實驗，但我有在使其跨設備響應，如臺式機，平板電腦，手機沒有圖像困難被拉伸或不正確安裝或在任一端被切斷。

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

我目前正在做的一切在CSS中，所以這是我的首選修改方法。

在此先感謝。

Answer 1

您可以嘗試

background-size: contain; 

它能夠使背景圖像響應的最簡單的方法。 但是請注意，隨着寬度隨着屏幕寬度而調整，它也會使圖像的高度成比例降低。

我可以看到你有一個固定的高度，並已經使用

background-size: cover; 

這是我通常會如果你希望它自動填充容器，而不管容器的大小的建議。

你不能有兩個（沒有拉伸&總是填充不管容器的大小）。看着圖像（假設它必須使用的頁面混合的空白空間），我建議你將它添加到類中，以便它保持響應，但總是將設計修復在div底部，以便它始終可以融入到白色以上。讓我知道如果你需要任何澄清或疑問

background-position: center 100%;