增加标题的宽度答案

【问题标题】：Increasing The Width Of Your Header增加标题的宽度
【发布时间】：2017-11-20 04:38:53
【问题描述】：

我的网站是 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 和 Additional 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 中进行修改。在我的最后一次实验给我带来了重大问题之后，我不愿意自己做更多的实验。有人可以提供一些指导吗？

基于下面的cmets我的代码现在如下

其他 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">

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

【问题讨论】：

嗨，目前尚不清楚您的意图是什么。您可以为您想要的最终结果制作图像吗？让我看看你想要什么。
在 NomadicMatts 网站 (nomadicmatt.com) 上，标题图像的任何一侧都没有任何空白，并且标题图像上的所有文本始终可见。我想复制它。
你最好找一个有这样设计的更好的模板。

标签： php css wordpress header

【解决方案1】：

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

在 Additional 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】：

您的图像不会扩展到页面的整个宽度，因为它们位于具有最大宽度的包装器中。您可以将图像放在包装器之外（见下文）。您也可以将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%;
}

【讨论】：

我怎样才能把图片带出包装？
通过以我在答案中显示的相同方式编辑您的 header.php 文件。 #page 元素是包装器。因此，只需将您的图像和可访问性 .skip-link 移到该 div 之外和上方。
请看我原始问题的底部。我现在已经修改了。
@RossSymonds 仅更改 CSS 并不能解决您的问题。您还需要将图像移到包装器 div 之外，以使该 CSS 产生任何效果。请完整阅读我的回答。
我只是有点不确定你回复的后半部分。