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

Posted 2023-03-06

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

【英文标题】：How to make header's height depend on background image height?

【发布时间】：2016-12-27 14:37:47

【问题描述】：

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

我正在使用 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

【问题讨论】：

任何关于当前正在发生的事情的演示

【参考方案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之间的区别

【讨论】：

非常感谢您的反应！但是 ii 对我不起作用。我猜代码中会有一些我看不到的魔法，或者我只是做错了什么：/

那么请分享更多细节。我会尝试修复它。这就是为高度所做的。它会自动占据内容的高度。

***.com/questions/11099930/… 阅读此内容。它建议直接使用图像标签。为什么要使用图像作为背景？在里面使用 标签也可以。

谢谢！我只是按照教程进行操作 - 这就是为什么 ;) 我使用了 img 标签，并且图像的行为方式符合我现在想要的方式。但我正在解决另一个问题——如何让内容（站点名称和站点描述）覆盖在标题上。

@Balu 使用绝对位置和 Z 索引。你可以谷歌那些。很简单:) philipwalton.com/articles/what-no-one-told-you-about-z-index