试图让旗帜/图像响应

Question

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

我的横幅（树枝的景观形象）的实验，但我有在使其跨设备响应，如台式机，平板电脑，手机没有图像困难被拉伸或不正确安装或在任一端被切断。

想就如何解决这个问题提出一些建议，同样如果我需要调整实际图像的尺寸，它是大吗？它应该更小？等

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

在此先感谢。

Answer 1

您可以尝试

background-size: contain; 

它能够使背景图像响应的最简单的方法。 但是请注意，随着宽度随着屏幕宽度而调整，它也会使图像的高度成比例降低。

我可以看到你有一个固定的高度，并已经使用

background-size: cover; 

这是我通常会如果你希望它自动填充容器，而不管容器的大小的建议。

你不能有两个（没有拉伸&总是填充不管容器的大小）。看着图像（假设它必须使用的页面混合的空白空间），我建议你将它添加到类中，以便它保持响应，但总是将设计修复在div底部，以便它始终可以融入到白色以上。让我知道如果你需要任何澄清或疑问

background-position: center 100%;