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

Question

在朋友的网站上，我正在尝试帮助他正确显示索引页横幅。使用的主题是 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" alt="" 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 检查时，我得到以下信息

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

Answer 1

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

Answer 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 高度等于图像高度，这样你就可以避免空格..

Answer 3

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

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