缩放 CSS Header

Question

我正在尝试根据浏览器 window 的宽度为我的 header 设置可缩放的背景图片（目前）。现在，根据我所拥有的，它的宽度可以很好地缩放。但是 header 本身并没有改变高度，它停留在文本行的高度上。如果我没有文字，它根本不会出现。当我将 window 调整得更大时，header 图像的底部不显示。我已经尝试将 min-height 设置为各种不同的值，但它没有满足我的需要。

我想让它根据图像缩放 header 的高度。如果 window 很小，它会缩小到文本行的高度。如果它很大，它将缩放 比文本行大 。是否可以？我看过其他网站，它工作得很好。我在 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

我个人会使用 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 超出其自然大小时，图像将开始变得比视口宽。

然后使用媒体查询设置绝对 header 大小，当它达到 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 Header

Scaling CSS Header

html

css

scalable