Scaling CSS Header

我试图为我的标题设置一个可缩放的背景图片，只是基于浏览器窗口的宽度（现在）。现在，与我所拥有的一样，它的宽度缩放得很好。但是标题本身并没有改变高度，它与文本行的高度有关。如果我没有文字，它根本不会出现。当我调整窗口的大小时，标题图像的底部不显示。我曾尝试将最小高度设置为各种不同的值，但它并没有满足我的需要。Scaling CSS Header

我希望它根据图像缩放标题的高度。如果窗口很小，它会缩小到文本行的高度。如果它很大，它会比文本行缩放大。这可能吗？我见过其他网站，它的工作很好。我已经找到说明如何做到这一点......在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; 
}

来源

2015-02-24 CarenRose

您无法将某些东西缩放到背景图像的高度。 – 2015-02-24 17:23:54

您无法使背景图片上的标题高度依赖于它。显示背景的唯一部分是div所占用的空间。 – j4k3 2015-02-24 17:27:22

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

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

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

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

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

来源

2015-02-24 17:25:02 Aaron

这工作！现在，有没有办法让标题的高度不缩放到小于p的高度？ – CarenRose 2015-02-24 17:48:03

使用媒体查询删除填充并在屏幕与图像宽度匹配时添加固定高度。 – Aaron 2015-02-24 18:56:13

我已经为你更新了我的答案。如果这是正确的，可以点击我答案旁边的勾号。 – Aaron 2015-02-24 19:00:51

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

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

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

的bottom-padding在容器上竟然会被它的宽度（并非其高度）的百分比，因此您可以使用比率力一个容器始终为缩放图像提供足够的空间。

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

来源

2015-02-24 17:26:50

Scaling CSS Header

回答

相关问题