Wordpress 无法正确显示索引页眉图像

Posted 2023-03-06

【中文标题】Wordpress 无法正确显示索引页眉图像

【英文标题】：Wordpress Cannot display correctly index page header image

【发布时间】：2017-08-12 19:59:55

【问题描述】：

在朋友的网站上，我正在尝试帮助他正确显示索引页横幅。使用的主题是 Arcade Basic (Batovasan)

库中上传的图片为1920x500px（150dpi），生成的html代码为：

<header id="header">
    <div class="title-card-wrapper">
         <div class="title-card" style="height: 778px;">
            <img class="header-img" src="http://www.example.com/wp-content/uploads/myHeader.jpg"  style="position: absolute; left: -667px; top: 0px; right: auto; bottom: auto; width: auto; height: 100%;">
        </div>
    </div>
</header>

图像自动设置为放大并自动向左负位置...（请参阅http://www.tangoumois.com）

当前的css是

.title-card 
  position: relative; 

.title-card-wrapper 
  overflow: hidden; 

.title-card 
  z-index: 1;
  width: 100%;
  display: table;
  text-align: center; 
  .title-card > img.header-img 
    position: absolute;
    z-index: 0;
    left: -9999px;
    max-width: none; 

在function.php中，有一个过滤器可以上传和调整图片大小

// Add a filter to bavotasan_header_image_width and bavotasan_header_image_height to change the width and height of your custom header.
add_theme_support( 'custom-header', array(
    'header-text' => false,
    'flex-height' => true,
    'flex-width' => true,
    'random-default' => false,
    'width' => apply_filters( 'bavotasan_header_image_width', 1920 ),
    'height' => apply_filters( 'bavotasan_header_image_height', 500 ),
) );

当我使用 Chrome Dev 检查时，我得到以下信息

如何正确设置横幅，没有这个负面位置..

【参考方案1】：

您有许多不必要的 CSS 样式。此外，在这种情况下，使用 background-image 可能比 img 更好。

【讨论】：

当然...但这不是我的 CSS...由主题开发人员完成，我也更喜欢编写原始 HTML5 + CSS3...无论我要处理它... ;- ))

【参考方案2】：

所以你在标签内使用图像，而你试图将它放在背景层中，

所以我对你的基本解决方案是更改一些代码，删除该行， 转到 css 并执行以下操作：

#site-meta
    background: url(http://www.tangoumois.com/wp-content/uploads/2017/03/Bannière-PageActualité.jpg);
    background-size: contain;
    background-repeat: no-repeat;

图片 > https://image.ibb.co/jpZQJv/Capture.png 说明：

如果你想在 div 的背景中有一张图片，你必须使用 css 来实现 (background:url('');..

如果你想继续使用它与图像标签，你应该改变你的 div 高度等于图像高度，这样你就可以避免空格..

【讨论】：

你将（.title-card 高度改为 height: 565px;）然后你就可以完成了。

非常感谢... ！！！

【参考方案3】：

在left: 0; 上从这个块中删除left: -9999px;（最好删除）

      .title-card > img.header-img 
        position: absolute;
        z-index: 0;
        left: -9999px;
        max-width: none; 

【讨论】：

thanks left: 0 很好，但这不会改变调整大小的任何东西......我想 Burhan（下面）给了我们一些很好的提示......我想把我的横幅作为任何其他页面标题横幅（它们都具有相同的大小）但主题试图将其用作背景...（放大了很多...）