如何为不同的视口更改 Drupal 7.x Zen 主题的横幅？

Question

我有一个仍然使用 Drupal 7.x 的站点。我有一个顶部横幅，可以在大于 1100 像素的大屏幕上正常工作。但是，相同的横幅不适用于较小的屏幕，尤其是智能手机尺寸的显示器。那么，如果我将横幅放入带有图像标签的块中，如何更改不同显示宽度的源图像？

我尝试对不同的背景图像使用百分比宽度和媒体查询。我还没有找到一种方法来设置背景图像的样式，以便将其调整为视口的百分比。它将根据媒体查询更改背景图像，但我无法使背景图像的对齐方式或百分比宽度随着视口宽度的变化而变化。

提前感谢您提供有关如何管理此问题的任何建议。也许有一个模块可以根据视口的大小来处理更改块的内容。

Answer 1

如果横幅不适合您的小屏幕，请尝试使用background-size: contain 或background-size: cover。 应该可以仅使用 CSS 进行归档，而无需在所有媒体查询中使用不同的图像。