php – 增加标题的宽度

我的网站是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,然后空白区域开始出现在标题的右侧.

解决方法:

您的图像不会扩展到页面的整个宽度,因为它们位于具有最大宽度的包装器内.您可以将图像带到包装器之外(见下文).您还可以对图像应用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%;
}

php – 增加标题的宽度

相关推荐