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

Question

试图找到很长的答案，但我甚至不知道如何向searchbar表达这个问题-因此我将尝试在这里解释，如果您知道答案已经被回答，我将很高兴看到链接：）

我正在使用下划线框架创建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 } ?>

谢谢你的任何建议。抱歉，如果这是显而易见的。我是个新手。

现在发生了什么：

演示

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等是块元素。他们占母公司部门的100%。

说你有一个

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

在这里，内部div也占据了500px。

我尝试了类似的代码，您所要做的就是将display设置为inline。

.site-header {
    display: inline;
}

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

您可以阅读有关块和内联之间的差异的更多信息