Question

我的网站是www.rosstheexplorer.com

我希望标题图像在整个页面上展开，但我不希望任何字母被“Ross The Explorer”文本删除。

在customer-header.php中我有这段代码

 */
function penscratch_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'penscratch_custom_header_args', array(
        'default-image'          => '',
        'default-text-color'     => '666666',
        'width'                  => 937,
        'height'                 => 300,
        'flex-height'            => true,
        'wp-head-callback'       => 'penscratch_header_style',
        'admin-head-callback'    => 'penscratch_admin_header_style',
        'admin-preview-callback' => 'penscratch_admin_header_image',
    ) ) );
}

我改变了

 'width'                  => 937,

到

'width'                  = 100%,

这会带来灾难性后果，您可以在此处阅读Where Can I Download The Wordpress Penscratch Theme Files?和Finding custom-header.php in file manage on Wordpress Penscratch theme。

3天后，我设法修复了伤害。

我有两个标题图片，一个用于移动设备。我有与header.php和附加CSS中的标题图像相关的代码。

在header.php中，代码是

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>


<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

在其他CSS中，代码是

@media screen and (min-width: 661px) {
    .mobile-header-img {
        display: none;
        width: 100%;
    }
}

@media screen and (max-width: 660px) {
    .header-img {
        display: none;
    }
}

我不确定是否需要在php文件或附加CSS中进行修改。在我的最后一次实验给我带来了重大问题之后，我不愿意再进行自己的实验了。有人可以提供一些指导吗？

根据以下评论，我的代码现在如下

其他CSS

@media screen and (min-width: 661px) {
        .mobile-header-img {
            display: none;
            width: 100%;
 max-width: none;
        }
    }

    @media screen and (max-width: 660px) {
        .header-img {
            display: none;
width: 100%;
 max-width: none;
        }
    }

的header.php

<body <?php body_class(); ?>>
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>


<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">


<div id="page" class="hfeed site">

这实现了我的目标，直到浏览器的宽度大于1300px，然后空白区域开始出现在标题的右侧。

Answer 1

您的图片不会扩展到页面的整个宽度，因为它们位于具有最大宽度的包装中。您可以将图像带到包装器之外（见下文）。您也可以将position:absolute应用于图像，但这会导致另外一组问题。

<body <?php body_class(); ?>>
  <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
  <div class="header">
    <img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
    <img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
  </div>
    <div id="page" class="hfeed site">

你还需要添加这个CSS来强制图像扩展到超出它的自然尺寸，但是这会开始模糊图像。

.header img {
  max-width: none;
  width: 100%;
}

Answer 2

使用WizardCoder出色的支持和建议，我能够解决问题。

在附加CSS中，我的代码现在是

@media screen and (min-width: 661px) {
        .mobile-header-img {
            display: none;

        }
    }

    @media screen and (max-width: 660px) {
        .header-img {
            display: none;

        }
    }

.header img {
  max-width: none;
  width: 100%;
}

在header.php中，我的代码现在是

<body <?php body_class(); ?>>
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>

<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

 </div>
<div id="page" class="hfeed site">




<header id="masthead" class="site-header" role="banner">

增加标题的宽度

2 个答案: