增加标题的宽度

2022-01-11 00:00:00 header php wordpress css

我的网站是 www.rosstheexplorer.com

My website is www.rosstheexplorer.com

我希望标题图像延伸到整个页面，但我不希望从Ross The Explorer"文本中删除任何字母.

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.

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

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

我变了

 'width'                  => 937,

到

'width'                  = 100%,

这造成了灾难性的后果，您可以在此处阅读 在哪里可以下载 Wordpress Penscratch 主题文件? 和 在 Wordpress Penscratch 主题的文件管理中查找 custom-header.php.

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.

3 天后，我设法修复了损坏.

After 3 days I managed to fix the damage.

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

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

header.php 中的代码是

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

在附加的 CSS 中代码是

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

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

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

其他 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 像素，然后空白开始出现在标题的右侧.

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.

推荐答案

您的图像不会扩展到页面的整个宽度，因为它们位于最大宽度的包装器中.您可以将图像放在包装器之外(见下文).您也可以将 position:absolute 应用于图像，但这会导致一系列其他问题.

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

您还必须添加此 CSS 以强制图像扩展超出其自然大小，但这会使图像开始有点模糊.

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

相关文章