-2

我需要 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;
  }
}

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

4

1 回答 1

0

这是一个基于 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 的解决方案，用于 template-parts > header > header-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。

于 2019-09-13T07:46:55.333 回答