Question

我一定很遗憾。编辑纯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">

Answer 1

简单！ CSS

background-size:contain;

希望我能提供帮助：）

编辑：您可以选择使用：

background-position: center center;

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

侧面说明，如果您的图像没有显示，请尝试在括号之间添加引号;这样：

url('pathtoimage/image.png');

Answer 2

看来你这样做的方法比较困难。试试这个：

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

然后

.left-header {
    width:100%;
    max-width:100%;
    height:auto
}

破碎的响应图像

2 个答案: