Wordpress无法正确显示索引页面标题图像

Question

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

图书馆上传的图片是1920x500px（150dpi），生成的HTML代码是：

where ISNUMERIC(txntype) = 9

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

当前的css是

<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>

并且在function.php中，有一个上传和调整图像大小的过滤器

.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; }

当我使用Chrome Dev检查时，我得到以下内容

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

Answer 1

从left: -9999px;上的chane it中移除left: 0;此块中的内容（最好删除）

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

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;
}

图片＆gt; https://image.ibb.co/jpZQJv/Capture.png  说明：

如果你想在div的背景中有一个图像，你必须使用css使用（background：url（''）; ..

如果您想继续将它与图片标签一起使用，您应该将div高度更改为等于图像高度，这样就可以避免使用空格..

Answer 3

你有许多不必要的CSS样式。此外，在这种情况下，使用背景图像可能比使用img更好。