增加宽度你的头

我的网站是www.rosstheexplorer.com增加宽度你的头

我想报头图像在整个页面舒展，但我不希望任何信件将被剁掉了“罗斯的浏览器”文本。

在客户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，则空白区域开始显示在右侧标题。

来源

2017-06-17 Ross Symonds

喜，目前尚不清楚什么是你的意图。你能为你想要的最终结果制作一张图片吗？就这样我可以看到你想要什么。 – viCky

在NomadicMatts网站（https://www.nomadicmatt.com/）上，标题图像两侧永远不会有任何空白区域，并且标题图像上的所有文本始终可见。我想复制它。 –

你应该更好地找到一个更好的模板，它有这样的设计。 – viCky

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

来源

2017-06-17 14:27:37 WizardCoder

我怎样才能把图像外包装？ –

通过以我在答案中显示的相同方式编辑您的'header.php'文件。 '＃page'元素是包装器。因此，只需将您的图像和您的可访问性'.skip-link'移动到该div的外部和上方即可。 – WizardCoder

请参阅我原始问题的底部。我现在修改了它。 –

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

来源

2017-06-17 15:20:48

增加宽度你的头

回答

相关问题