如何针对不同视口更改 Drupal 7.x Zen 主题上的横幅？
How do I change the banner on Drupal 7.x Zen theme for different viewports?
我有一个网站仍在使用 Drupal 7.x。我有一个顶部横幅，在大于 1100 像素的大屏幕上效果很好。然而，同样的横幅在较小的屏幕上不起作用，尤其是在智能手机大小的显示器上。那么，如果我将横幅放入带有图像标签的块中，我该如何更改源图像以适应不同的显示宽度？
我尝试对不同的背景图像使用百分比宽度和媒体查询。我还没有找到一种方法来设置背景图像的样式，使其按视口的百分比调整大小。它将根据媒体查询更改背景图像，但我无法使背景图像的对齐方式或百分比宽度随视口宽度的变化而变化。
提前感谢您提供有关如何处理此问题的任何建议。也许有一个模块可以根据视口的大小处理更改块的内容。
如果横幅不适合您的小屏幕，请尝试使用 background-size: contain 或 background-size: cover。
应该可以仅使用 CSS 来实现这一点，而无需在所有媒体查询中使用不同的图像。
我有一个网站仍在使用 Drupal 7.x。我有一个顶部横幅，在大于 1100 像素的大屏幕上效果很好。然而，同样的横幅在较小的屏幕上不起作用，尤其是在智能手机大小的显示器上。那么，如果我将横幅放入带有图像标签的块中，我该如何更改源图像以适应不同的显示宽度？
我尝试对不同的背景图像使用百分比宽度和媒体查询。我还没有找到一种方法来设置背景图像的样式，使其按视口的百分比调整大小。它将根据媒体查询更改背景图像，但我无法使背景图像的对齐方式或百分比宽度随视口宽度的变化而变化。
提前感谢您提供有关如何处理此问题的任何建议。也许有一个模块可以根据视口的大小处理更改块的内容。
如果横幅不适合您的小屏幕，请尝试使用 background-size: contain 或 background-size: cover。
应该可以仅使用 CSS 来实现这一点，而无需在所有媒体查询中使用不同的图像。