WordPress：移动 + 桌面的不同标题图像答案

【问题标题】：WordPress: Different Header Images for Mobile + DesktopWordPress：移动 + 桌面的不同标题图像
【发布时间】：2018-07-12 18:05:00
【问题描述】：

我有一个 WordPress 网站，我使用了一个在桌面上运行良好的标题图片：http://fortyfourth.co.uk

但是，在移动设备上，图像根本无法正常工作。

是否可以仅为移动设备使用自定义标题图片？我对 WordPress 非常陌生（以及与此相关的任何编码元素），因此，如果这可能的话，如果您能告诉我需要在哪里以及如何添加自定义代码，那就太好了。

谢谢，瑞恩

【问题讨论】：

标签： wordpress image mobile wordpress-theming desktop

【解决方案1】：

标题图片在您网站的移动视图中看起来不错，但如果您想在页面中使用其他背景图片，请使用以下 css 规则：

@media screen and ( max-width: 425px ){ 
  .page-id-155 .ewf-header-image-option{
      background-image: url("http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png") !important;
      max-height: 150px !important;
      background-position: 49% 0px !important;
  }
}

使用您的新图片完整网址代替 http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png。

在我们定义的这一行中，您的图像何时更改：@media screen and ( max-width: 425px ){。 max-width: 425px 表示对于所有宽度小于 425 像素的屏幕。你可以用你想要的宽度来改变它。

max-height: 150px !important;的意思是图片高度的部分不会超过150px，150px可以随意改成你想要的高度。

关于background-position你可以了解here。

代码转到Customize -> Additional Css。

【讨论】：

不介意接受我的回答，如果它对你有帮助的话。另外，请随时提出问题

【解决方案2】：

我尝试了这个，完全按照书面形式和几个变体，使用 CSS，但无济于事。

我最终使用了一个位于 https://wordpress.org/support/topic/setting-a-different-header-image-for-mobile/ 的 PHP 模块

我最终不得不重新调整备用图像的大小，这导致页面上的其余图像被缩放。但我想我有一个解决方案。

我希望这会有所帮助。

【讨论】：