Question

我正在尝试为我的标题设置可缩放的背景图像，仅基于浏览器窗口的宽度（目前为止）。现在，凭借我所拥有的，它在宽度上缩放就好了。但是标题本身不会改变高度，它会与文本行的高度相关联。如果我没有文字，它就不会出现。当我将窗口调整得更大时，标题图像的底部不会显示。我已经尝试将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;
}

Answer 1

我个人会使用身高：0填充底部：％;对于响应高度。我认为你所追求的是这样的。

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

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

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

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

Answer 2

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

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

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

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

比率可以计算为（100 * imageHeight / imageWidth）％

缩放CSS标头

2 个答案: