1

我一定错过了一些简单的东西。在编辑一个普通的 Wordpress 模板时，我决定在标题中添加一个背景图像。我需要使用响应式设计来缩放图像，所以我将最大宽度设置为 100%，将高度设置为自动.. 没有任何显示。如果我将背景设置为与图像原始尺寸 (700 x 220) 匹配的固定尺寸，那么一切都很好，除非我缩小网站或在移动设备上查看。请帮忙！作为参考，该站点是 portlandtoraleigh.com 谢谢！

CSS：

.left-header{
background: url(images/headerimage.png) no-repeat;
max-width: 100%;
height: auto;

}

HTML：

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />

<title><?php wp_title( '&mdash;', true, 'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php do_action( 'before' ); ?>
    <div class="left-header">
    </div>

    <div id="comeon">
    <nav class="site-navigation main-navigation" role="navigation">
    <h1 class="assistive-text"><?php _e( 'Menu', 'semprul' ); ?></h1>
    <div class="assistive-text skip-link"><a href="#content" title="<?php
            esc_attr_e( 'Skip to content', 'semprul' ); ?>"><?php _e( 'Skip to content',
            'semprul' ); ?></a></div>

    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- .site-navigation .main-navigation -->
    </div>
</header><!-- #masthead .site-header -->
<div class="clear"></div>

<div id="main" class="site-main">
4

2 回答 2

0

简单的！CSS

background-size:contain;

希望我有帮助:)

编辑：您可以选择使用：

background-position: center center;

将背景图像水平和垂直居中。

附带说明，如果您的图像未显示，请尝试在括号之间添加引号；所以：

url('pathtoimage/image.png');
于 2013-04-07T19:49:46.927 回答
0

It seems that you are doing this the more difficult method. Try this:

<img class="left-header" src="filepath/image.png" />

then

.left-header {
    width:100%;
    max-width:100%;
    height:auto
}
于 2013-04-07T20:19:44.243 回答