Header Logo Scaling

时间:2016-01-25 作者:Nicholas Ritson

我使用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\', \'\')  ?>); }

1 个回复
最合适的回答,由SO网友:Aibrean 整理而成

简单地说。。。

您可以将其添加到背景属性:

background-size: contain;

这将具有与消耗可用区域成比例的图像比例。

也可以将图像更改为非背景图像。这将允许您设置更多的相对尺寸(如固定的高度或宽度,另一个自动值)。

不过,在不调整菜单其余部分的情况下,背景尺寸上的“包含”效果会更好。

是的,您仍然需要填充该区域,除非您想增加其所在容器的可用尺寸。否则它就是一条狭长的(背景图像)。或者,您可以设置一个高度,因为这样图像将包含合适的高度。

相关推荐

Responsive Images

是否有本机功能可以根据屏幕分辨率显示帖子缩略图或图库图像的正确响应图像大小?通常我使用:1、自定义图像大小:function customImageSetup () { add_theme_support( \'post-thumbnails\' ); add_image_size(\'grid_1 mini square\', 60, 60, TRUE); add_image_size(\'grid_2\', 160); add_image_size(\'