Html 如何使div在不同大小下保持格式相同

我们有一个带有背景图像、一些文本（h1和p）和“调用操作”按钮的引导Jumbotron，希望能够为不同的视口缩放图像，但保持格式不变。因此，div将被视为图像

我在这里开始了这个实验：并尝试了转换和变换，但我无法让它正确显示。它一直像一个反应灵敏的潜水艇

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <img src="https://picsum.photos/id/1056/1424/562" alt="test" class="img-fluid">
      <div class="heroContent">
        <h1>Jumbotron H1 goes here</h1>
        <p class="pHero">
        This is the first line in the jumbotron.<br>
        The second line appears underneath the first line.
        </p>
        <button type="button" class="btn btn-primary">Chat With Us</button>
      </div>
    </div>
  </div>
</div>

.container {
  max-width:1424px;
}
.heroContent {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
}

Jumbotron H1在这里

这是jumbotron中的第一行。

第二行显示在第一行下面。

与我们聊天
.集装箱{
最大宽度：1424px；
}
Herocont先生{
位置：绝对位置；
最高：30%；
左：30%；
转换：翻译（-50%，-50%）；
}

---

我们的目标是使整个div本质上被视为一个图像，在这里，它可以在不改变格式或布局的情况下进行缩放。

尝试一下精彩的CSS纵横比框技巧。基本思想利用了浏览器计算

填充顶部时的一个怪癖。如果使用基于百分比的值，它将与宽度相关，而不是与您可能期望的元素高度相关。阅读更多：

对于您的布局，我简化了标记，因此只有一个外部div（
.postcard
）和一个包含所有内容的内部div（
.heroContent
）

外部div获得
position:relative
，因为内部div将绝对定位。然后像这样应用纵横比技巧：

.postcard {
  width: 1424px;
  padding-top: calc(562 / 1424 * 100%);
}

.heroContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

padding top
属性通过将高度除以宽度，然后将该比率乘以100%来计算纵横比，以获得相对于宽度的正确高度（因为它是padding top）。现在，外部容器将始终保持固定的高度/宽度纵横比。将图像作为背景应用于该分区。您的内部内容可以按如下方式排列以覆盖该区域：

.postcard {
  width: 1424px;
  padding-top: calc(562 / 1424 * 100%);
}

.heroContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

要偏移内容的位置，请利用
填充顶部的相同怪癖：

.heroContent {
  padding-top: 8%;
  padding-left: 8%;
}

请记住，
填充顶部
基于宽度，因为该值是百分比。现在，您只需使用div缩放内容即可。为此，请指定与视口宽度相关的
font size
值：

.heroContent h1 {
  font-size: 3vw;
  margin-top: 0; /* this line removes the extra space you would get from default margin top on a heading element */
}

.pHero {
  font-size: 1.8vw;
}

.heroContent .btn {
  font-size: 1.2vw;
}

在全屏视图中运行代码段，并更改视口宽度以查看效果。希望有帮助！
。明信片{
位置：相对位置；
宽度：1424px；
最大宽度：100%；
填料顶部：钙（562/1424*100%）；
背景图像：url（'https://picsum.photos/id/1056/1424/562');
背景重复：无重复；
背景位置：左上；
背景尺寸：封面；
}
Herocont先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
垫顶：8%；
左：8%；
}
.内容h1{
字体大小：3vw；
边际上限：0；
}
费罗先生{
字体大小：1.8vw；
}
.heroContent.btn{
字体大小：1.2vw；
}

Jumbotron H1在这里

这是jumbotron中的第一行。
第二行显示在第一行下面。

与我们聊天
也许最好用背景图像制作一个div，然后将hero content div以%的相对宽度放在其中？这就是你想要做的吗？这是怎么回事？看#percentage@Rustyjim-您介意提供一个示例吗？您可以查看
vw
、
vh
或
vmin
/
vmax
值以调整
字体大小。如果使用
calc（）
，可以避免它变得太大或太小。测试更新：调整窗口的宽度以查看其功能。根据您的需要调整
字体大小
和
填充
以查看
.heroContent
。如果这一点变得更接近：）我可以在以后的工作中举个例子。还需要吗？因为下面的答案在我看来也不错。慢的Sry:）这几乎是完美的。谢谢出于某种原因，我的Firefox（Win10）中没有显示背景图像。