可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

My website is www.rosstheexplorer.com

I want the header image to stretch across the whole page but I do not want any letters to be chopped off the 'Ross The Explorer' text.

In customer-header.php I had this code

 */
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',
    ) ) );
}

I changed

 'width'                  => 937,

'width'                  = 100%,

This had disastrous consequences which you can read about here Where Can I Download The Wordpress Penscratch Theme Files? and Finding custom-header.php in file manage on Wordpress Penscratch theme.

After 3 days I managed to fix the damage.

I have two header images, one for mobile devices. I have code relating to the header images in header.php and Additional CSS.

In header.php the code is

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

In additional CSS the code is

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

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

I am unsure if I need to make modifications in the php files or in Additional CSS. After my last experiment caused me major problems I am reluctant to do any more experimenting on my own. Could someone provide a bit of guidance?

Based on comments below my code is now as follows

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

This achieves my aims up till the width of the browser is greater than 1300px, then white space starts appearing to the right of the header.

回答1:

Your images will not expand to the full width of the page, because they are inside a wrapper with a max-width. You could take your images outside of the wrapper (see below). You could also apply position:absolute to the images, but that would cause a whole other set of problems.

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

You would also have to add this CSS to force the image to expand beyond it's natural size, however this would start to blur the image a bit.

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

回答2:

Using WizardCoder fantastic support and advice I was able to solve the problem.

In Additional CSS my code is now

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

In header.php my code is now

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