殘破的響應式圖像

我必須缺少一些簡單的東西。在編輯一個普通的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">

來源

2013-04-07 Kevin Sundstrom

看來你正在做這個更困難的方法。試試這個：

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

然後

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

來源

2013-04-07 20:19:44

仍然不顯示。一探究竟。 – 2013-04-07 20:24:23

刪除它周圍的div標籤，以便只有圖像標籤。然後將圖像的src更改爲'http://portlandtoraleigh.com/wp-content/themes/semprul/images/headerimage.png' – 2013-04-07 20:27:35

太棒了，這就是訣竅。我的大腦一直處於WP模式，我忘記了基本知識......非常感謝，我爲此感到羞愧多少次了！ – 2013-04-07 20:32:04

簡單！ CSS

background-size:contain;

希望我是有幫助:)

編輯：您可以選擇使用：

background-position: center center;

以水平和垂直居中背景圖像。

注意，如果您的圖片不顯示，請嘗試在圓括號之間添加引號;所以：

url('pathtoimage/image.png');

來源

2013-04-07 19:49:46

感謝帕特里克的嘗試，但沒有工作... – 2013-04-07 19:52:55

我更新了它，你可能需要在URL – 2013-04-07 19:54:33

而且之間引號，HTTP： //portlandtoraleigh.com/images/headerimage.png無法找到：/ – 2013-04-07 19:55:11

殘破的響應式圖像

回答

相關問題