WP Simple主题首页图片行为修改求助：限制最大宽度为指定像素

看你提供的代码，这个banner是用视差背景图实现的（带parallax_active类和data-parallax属性），动态的padding-top/bottom应该是用来保持图片宽高比的。先给你两种解决方案，从最简单的CSS开始试：

方案1：用CSS直接限制最大宽度（优先尝试） #

这个方法最直接，不用改动JS，直接给banner容器加最大宽度并居中，同时调整背景图的显示逻辑：

.frontpage-banner.parallax_active {
  max-width: 1200px; /* 替换成你需要的最大像素值 */
  margin: 0 auto; /* 让banner在页面居中显示 */
  background-size: cover; /* 保持背景图覆盖整个容器 */
  background-position: center center; /* 确保背景图居中对齐 */
}

你可以把这段代码加到WP后台的自定义CSS面板（路径：「外观」→「自定义」→「额外CSS」），这样不会因为主题更新丢失修改。

如果发现加上之后banner的上下padding比例错乱（因为原来的padding是JS根据视口宽度计算的），可以用CSS的aspect-ratio属性替换动态padding，比如你的图片是1920x640的3:1比例，就这么写：

.frontpage-banner.parallax_active {
  max-width: 1200px;
  margin: 0 auto;
  background-size: cover;
  background-position: center center;
  padding: 0 !important; /* 覆盖JS设置的动态padding */
  aspect-ratio: 3 / 1; /* 根据你的图片实际宽高比调整 */
}

方案2：修改视差JS的逻辑（如果CSS方案不生效） #

这个banner用的data-parallax属性，大概率是用了Parallax.js这类视差插件，JS会根据视口宽度计算padding来保持图片比例。如果CSS的max-width导致比例错乱，你需要找到主题中初始化视差的JS代码：

1. 打开主题的JS文件（一般在wp-content/themes/your-theme/js/目录下，比如main.js或parallax.js）
2. 找到类似初始化视差的代码：

$('.parallax_active').parallax({
  imageSrc: $(this).data('image-src'),
  // 其他配置参数
});

3. 修改插件计算容器尺寸的逻辑，让它基于容器的max-width而非视口宽度；或者手动设置容器的宽高比，替代JS的动态padding计算。

如果找不到主题里的JS代码，也可以尝试在自定义JS面板（如果主题支持）添加这段代码，覆盖原有的padding计算：

$(window).on('load resize', function() {
  const banner = $('.frontpage-banner.parallax_active');
  const maxWidth = 1200; // 你的最大宽度值
  const containerWidth = Math.min($(window).width(), maxWidth);
  const aspectRatio = 3 / 1; // 你的图片宽高比
  const paddingPercent = (1 / aspectRatio) * 100; // 转换为百分比padding

  banner.css({
    'max-width': maxWidth + 'px',
    'margin': '0 auto',
    'padding-top': paddingPercent + '%',
    'padding-bottom': paddingPercent + '%'
  });
});

这段代码会在页面加载和窗口resize时，重新计算banner的padding，确保比例正确的同时限制最大宽度。

内容的提问来源于stack exchange，提问作者Terix