我的网站是 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%;
}
这篇关于增加标题的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！