2

我正在尝试为我的标题设置一个可缩放的背景图像，仅基于浏览器窗口的宽度（目前）。现在，就我所拥有的而言，它的宽度缩放得很好。但是标题本身并没有改变高度，它与文本行的高度保持一致。如果我没有文字，它根本不会出现。当我将窗口调整得更大时，标题图像的底部不显示。我尝试将 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;
}
4

2 回答 2

2

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

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

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

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

@media (max-width: 900px) {
header {
padding:0;
height: 350px;
}
}
于 2015-02-24T17:25:02.630 回答
0

假设您知道背景图像的高度：

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

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

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

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

于 2015-02-24T17:26:50.073 回答