php 显示宽度不够,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%,

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

我有两个标题图像,一个用于移动设备.我有与header.php和附加CSS中的标题图像相关的代码.

在header.php中,代码是

<?php _e( 'Skip to content', 'penscratch' ); ?>

在其他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文件

<?php _e( 'Skip to content', 'penscratch' ); ?>

这实现了我的目标直到浏览器的宽度大于1300px,然后空白区域开始出现在标题的右侧.

解决方法:

您的图像不会扩展到页面的整个宽度,因为它们位于具有最大宽度的包装器内.您可以将图像带到包装器之外(见下文).您还可以对图像应用position：absolute,但这会导致另外一组问题.

<?php _e( 'Skip to content', 'penscratch' ); ?>

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

.header img {

max-width: none;

width: 100%;

}

标签：php,css,wordpress,header

来源： https://codeday.me/bug/20191003/1848334.html