需要CSS(PHP不起作用)根据设备类型在Wordpress TwentySeventeen中交换标题图像

Question

我需要CSS根据浏览器窗口的"当前"宽度交换TwentySeventeen主题中的标题图像。

注意：PHP 将不起作用，因为它仅在加载时运行。如果用户更改设备的方向，则在加载后，PHP 不会检测到该更改，因为 PHP 已经完成。解决方案必须是CSS，因为它是实时的，并将在页面加载后检测更改。

受影响的站点是：http://RVInspector.pro/

其中一个交换映像位于：http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg

仅供参考，我能够制作自己的网站，从头开始开发，几乎可以做任何事情。但是在处理Wordpress时，我不知道如何使这些原本简单的图像交换。

我尝试了两种不同的PHP修复，然后才意识到PHP在页面加载后不会检测到更改。我正在包括我尝试过的选项之一。

这一选择似乎没有效果。

@media screen and ( max-width: 425px ){ 
.page-id-155 .ewf-header-image-option{
background-image: url("http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg");
max-height: 150px;
background-position: 49% 0px;
}
}

我的标题图像是推荐的尺寸，适用于笔记本电脑或台式机。但它包含图形文本，当在手机或键盘上查看时，这些文本会溢出屏幕的左右边缘。我已经创建了几个足以满足需求的备用图像。但是当设备是移动的时，我无法让它们换入。

Answer 1

这是一个基于 CSS 的解决方案，它用调整大小的变体覆盖标题图像

.wp-custom-header::before {
content: "";
display: block;
position: relative;
z-index: 1;
padding-bottom: 100vh;
width: 100%;
background-size: cover;
background-position: center center;
}
@media (max-width: 450px) {
.wp-custom-header::before {
background-image: url(http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg);
}
}

它有点不优雅，因为它加载图像而不显示它们，所以这是一个基于 HTML 的解决方案，用于模板部分>标题>标题 img.php

<!--Replaces: <?php the_custom_header_markup(); ?> -->
<div id="wp-custom-header" class="wp-custom-header">
<picture>
<source media="(min-width: 1024px)" srcset="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-head-1024x614.jpg">
<source media="(min-width: 450px)" srcset="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-head-768x460.jpg">
<source media="(min-width: 300px)" srcset="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg">
<img src="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-head.jpg" alt="RV Inspector Pro - Certified RV &amp; Motorhome Inspections" sizes="100vw">
</picture>
</div>

请注意，这两个选项都会覆盖WP本身中设置的标头，因此如果要更改标题图像，则必须手动更新URL。