我使用customiser将图像加载到我的主题的标题中,因为它的customiser通过css将其插入作为背景图像,但是加载时,除非添加了填充,否则不会显示。有没有方法在不设置填充或其他度量的情况下加载图像,我希望页眉可以根据徽标的大小调整其高度,因为徽标的大小可能会不时变化,所以我希望避免使用固定高度。下面是该网站的链接,当前设置为padding:20px,下面是我的代码。link to site
代码:html
<style>
h1.dragoncove_client_logo {
background-repeat: no-repeat;
padding: 20px;
}
</style>
<div id="dragoncove_desktop_menu_1">
<div class="">
<div>
<div class="medium-12 large-2 columns">
<!-- insert custom logo here in customizer -->
<div><h1 class="dragoncove_client_logo"></h1></div>
</div>
<div class="medium-12 large-10 columns">
<div class="float-right"><?php dragoncove_slot_1(); ?></div>
</div>
<div class="large-12 columns">
<?php dragoncove_slot_2(); ?>
</div>
</div>
</div>
代码:功能
// Header Setting (upload logo)
$wp_customize->add_setting( \'dragoncove_header_logo\' , array(
\'default\' => \'\',
\'transport\' => \'refresh\',
\'sanitize_callback\' => \'\',
) );
// Header Control (upload logo)
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, \'dragoncove_header_logo\', array(
\'label\' => __( \'Logo\', \'dragoncove_header_logo\'),
\'section\' => \'dragoncove_header_section\',
\'settings\' => \'dragoncove_header_logo\',
) ) );
h1.dragoncove_client_logo {background: url(<?php echo get_theme_mod(\'dragoncove_header_logo\', \'\') ?>); }
最合适的回答,由SO网友:Aibrean 整理而成
简单地说。。。
您可以将其添加到背景属性:
background-size: contain;
这将具有与消耗可用区域成比例的图像比例。
也可以将图像更改为非背景图像。这将允许您设置更多的相对尺寸(如固定的高度或宽度,另一个自动值)。
不过,在不调整菜单其余部分的情况下,背景尺寸上的“包含”效果会更好。
是的,您仍然需要填充该区域,除非您想增加其所在容器的可用尺寸。否则它就是一条狭长的(背景图像)。或者,您可以设置一个高度,因为这样图像将包含合适的高度。