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/

我最終不得不重新調整備用圖像的大小，這導致頁面上的其余圖像被縮放。 但是我認為我有解決方案。

我希望這有幫助。