缩放 CSS 标头答案

【问题标题】：Scaling CSS Header缩放 CSS 标头
【发布时间】：2015-02-24 17:21:58
【问题描述】：

我正在尝试为我的标题设置一个可缩放的背景图像，仅基于浏览器窗口的宽度（目前）。现在，就我所拥有的，它的宽度缩放得很好。但是标题本身并没有改变高度，它与文本行的高度保持一致。如果我没有文字，它根本不会出现。当我将窗口调整得更大时，标题图像的底部不显示。我尝试将 min-height 设置为各种不同的值，但它并没有满足我的需要。

我希望它根据图像缩放标题的高度。如果窗口很小，它将缩小到文本行的高度。如果它很大，它将比文本行缩放更大。是否可以？我看过其他网站，它工作得很好。我在 WordPress 的某些特定主题中找到了如何操作的说明。

HTML：

<header>
        <p>
            Line 1<br>
            Line 2<br>
            Line 3<br>
            Line 4<br>
            Line 5<br>
        </p>
</header>

CSS：

header {
    background-image:url('./waybackIMG_1496.jpg');
    background-size : cover;
    background-repeat : no-repeat;
}
header p {
    line-height     : 1.2em;
    text-align      : right;
}

【问题讨论】：

您无法将某些内容缩放到背景图像的高度。
您不能使标题高度依赖于背景图像。背景显示的唯一部分是 div 占用的空间。

标签： html css scalable

【解决方案1】：

我个人会使用 height:0 padding-bottom: %;对于响应高度。我想你所追求的是这样的。

header {
    background-image:url('./waybackIMG_1496.jpg');
    background-size : cover;
    background-repeat : no-repeat;
height: 0;
padding-bottom: 40%;
}

使用 firebug 调整填充底部以适合图像的高度。使用background-size: cover;，当 padding-bottom 超过其自然大小时，图像将开始变得比视口更宽。

然后使用媒体查询设置绝对标题大小，当它达到 bg 图像的宽度时。

@media (max-width: 900px) {
header {
padding:0;
height: 350px;
}
}

【讨论】：

这行得通！现在，有没有办法让标题的高度不小于 p 高度？
当屏幕与图像宽度匹配时，使用媒体查询移除内边距并添加固定高度。
我已经为你更新了我的答案。如果这是正确的，可以点击我的答案旁边的勾号。

【解决方案2】：

假设你知道背景图片的高度：

header {
  /* background styles */
  padding-bottom: 20%;
  position: relative;
}

header p {
  position: absolute;
  width: 100%;
}

容器上的bottom-padding 实际上是其宽度（而不是高度）的百分比，因此您可以使用比率来强制容器始终为缩放图像留出足够的空间。

比例可以计算为(100 * imageHeight / imageWidth)%

【讨论】：