试图使横幅/图像自动响应

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

我正在尝试使用横幅(细枝的横向图像), 但是我很难使它在各种设备(例如台式机, 平板电脑, 移动设备)中做出响应, 而不会拉伸图像或使其无法正确贴合或在任一端被切断。

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

我目前正在使用CSS进行所有操作, 因此这是我首选的修改方法。

提前致谢。

#1

你可以试试

background-size: contain;

这是使背景图片具有响应性的最简单方法。但是请注意, 随着宽度随着屏幕宽度的变化而调整, 这也会使图像的高度成比例地减小。

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

background-size: cover;

如果你希望容器自动填充容器, 无论容器大小如何, 通常都会建议这样做。

你不能同时拥有两者(无论容器大小如何, 都不能拉伸且始终填充)。查看图片(与页面融合的空白, 并假设它是必须使用的), 我建议你将其添加到类中, 以使其保持响应状态, 但始终将设计固定在div的底部, 以便始终将其融合到白色以上。让我知道你是否需要任何澄清或问题

background-position: center 100%;