css - 尝试使横幅/图像响应

Question

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

我正在试验横幅( Twig 的横向图像)，但我很难让它跨设备响应，例如桌面、平板电脑、移动设备，图像不会被拉伸(stretch)或不正确适合或被切断结束。

想要一些关于如何解决这个问题的建议，如果我需要调整实际图像的尺寸，它是否太大了？它应该更小吗？等等

我目前所有的事情都是用css做的，所以这是我首选的修改方法。

提前致谢。

Answer 1

你可以试试

background-size: contain;

这是使背景图像具有响应性的最简单方法。但请注意，当宽度随屏幕宽度调整时，它也会使图像的高度按比例减小。

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

background-size: cover;

如果您希望它自动填充容器而不考虑容器的大小，我通常会推荐这种方法。

你不能两者兼得(无论容器大小如何，都不能拉伸(stretch)并且总是填充)。查看图像(与页面混合的空白并假设它是必须使用的)我建议您将其添加到类中，以便它保持响应，但始终将设计固定在 div 的底部，以便它始终可以融入上面是白色的。如果您需要任何说明或问题，请告诉我

background-position: center 100%;