WordPress：移动版和桌面版的不同标题图片

Question

我有一个WordPress网站，在其中使用了在台式机上运行良好的标题图片： http ： //fortyfourth.co.uk

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

是否可以仅将自定义标题图片用于移动设备？ 我对WordPress（以及与此相关的任何编码元素）非常陌生，因此，如果可以的话，如果您能告诉我在何处以及如何添加自定义代码，那将是很棒的。

谢谢，瑞安

Answer 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使用新图像的完整URL。

在这一行中，我们定义了何时更改图像： @media screen and ( max-width: 425px ){ 。 max-width: 425px表示宽度小于425px的所有屏幕。 您可以根据需要更改宽度。

max-height: 150px !important; 意思是，图像高度部分将不会超过150像素，您可以将150像素更改为所需的高度。

关于background-position您可以在这里学习。

代码转到Customize -> Additional Css 。

Answer 2

我尝试使用CSS完全按照书面规定和几种变体进行了尝试，但无济于事。

我最终使用了https://wordpress.org/support/topic/setting-a-different-header-image-for-mobile/

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

我希望这有帮助。