尝试让 banner/image 响应

Question

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

我正在试验横幅（树枝的横向图像），但我很难让它跨设备响应，例如桌面、平板电脑、移动设备，图像没有被拉伸、不正确适合或被切断在两端。

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

我目前正在css中进行所有操作，因此这是我首选的修改方法。

提前致谢。

Answer 1

你可以试试

background-size: contain;

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

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

background-size: cover;

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

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

background-position: center 100%;