Question

试图找到答案很长，但我甚至不确定如何向搜索栏表达问题 - 所以我会尝试在这里解释，如果你知道它已经回答了，我将很高兴链接：）

我正在使用The Underscores框架创建一个wordpress主题。我想让我的标题依赖于背景图像高度。我的意思是 - 我可以在那里上传任何大小的图像，标题的宽度将是图像的100％，高度将根据屏幕大小动态变化。

更好的想象力，这是一个例子： http://hitchdiary.cz/

尝试更改窗口的大小 - 图像始终完全显示，标题的高度会发生变化。

这就是我想要的。我所拥有的是静态大小标题，背景图像根据屏幕大小进行调整。

.site-header {            
    height: 100%;
    width: auto;
    background-color: #000;
    background-size: 100%;
}

标题图像由用户在wordpress调整部分设置。代码就是这样：

<?php if ( get_header_image() ){ ?>
            <header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner">
    <?php } else { ?>
            <header id="masthead" class="site-header" role="banner">
    <?php } ?>

感谢您的任何建议。对不起，如果那是显而易见的。我是一个新手。

现在要做什么：

demo

Answer 1

根据div中的内容自动计算高度。通过将其设置为100％，您可以告诉它采用父容器的高度。

将高度设置为自动将解决您的问题。

.site-header {            
    width: auto;
    background-color: #000;
    background-size: 100%;
}

or 

.site-header {            
    height: auto;
    width: auto;
    background-color: #000;
    background-size: 100%;
}

灵活宽度

抱歉，我认为它是灵活的宽度而不是高度。请忽略此声明下方的内容。但是，它可能会帮助您在将来调整宽度。

默认情况下，div，header，footer等是块元素。他们占父母div的100％。

说你有

<div class="parent" style="width:500px;">
    <div class="child"> </div>       
</div>

这里内部div占用了500px。

我尝试了类似的代码，你只需要将显示设置为内联。

.site-header {
    display: inline;
}

您甚至可以尝试将其浮动到左/右，以防它内联无效。

您可以详细了解block and inline

之间的差异

如何使标题的高度取决于背景图像的高度？

1 个答案: