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

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、页眉、页脚等都是块元素。它们占据了父 div 的 100%。

说你有一个

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

这里的内部 div 也占用了 500px。

我尝试了类似的代码，你所要做的就是将显示设置为内联。

.site-header {
    display: inline;
}

您甚至可以尝试将其浮动到左/右，以防使其内联不起作用。

你可以阅读更多关于block and inline之间的区别