Html 保持全屏图像的纵横比

我正在寻找一个由以下内容（从上到下）组成的网页：

• 图像/背景图像（全屏宽，保持纵横比）
• 导航栏（位于图像顶部，右对齐）
• 一些文本
• 另一个全屏图像（与第一个相同）
• 页脚

我遇到的问题是，如果我使用背景图像，我必须以px为单位指定图像高度。如果我使用img，我似乎只能使用绝对定位来实现这一点（导航栏在顶部），而绝对定位又不允许我将第二个div放置在第一个div的下方

为这张快速拼凑的图片道歉，我希望它能显示我的目标

---

实际上，您不必为背景图像指定固定高度。如果仅指定其宽度且高度保持自动，则它将保留其原始尺寸

.background-image {
  background-size: 100% auto;
}

---

要实现上面介绍的设置，有一种方法可以使用背景位置，但仍保留其尺寸。覆盖在顶部的文本需要绝对定位，所以这是您需要做出的决定。下面是顶部图像部分的设置，在这种情况下，图像的显示比例为16:9：

.background-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: url('someimg.jpg') center center / no-repeat cover;
}

---

填充底部百分比基于视口的宽度，因此这意味着高度为100%宽度的56.25%，或16:9。如果您对那里的实现有任何疑问，请告诉我。

要继续使用

img

标记，您需要做的是使用

absolute

position而不是position

absolute

img容器将“header”元素定位在内容上：

标题{
位置：绝对位置；
宽度：100%；
背景：rgba（0,255,255,5）；
线高：75px；
文本对齐：居中；
字号：3em；
}
部门经理{
宽度：100%；
}

Logo&Nav
Lorem ipsum dolor sit amet，奉献精英。奥特姆·夸姆、特尼乌尔·奎伊、塞德·马尼。是真的吗？在这种情况下，自然自由的格言是最重要的。多洛尔，康塞特图尔。
事实上，这是一种必要条件，不包括暂时性的利益最大化，也不包括劳动和腐败！努姆夸姆！
除了在hic合理范围内使用驱避性镨外，还应使用暂时性的补充剂，而不是其他补充剂！它是一种动物的透明体，是一种动物的透明体。
要想让所有的人都能感受到这一点，就必须提高自己的生活水平，并在所有人都能感受到这一点的情况下，将准铜酸盐作为一种新的物质来使用！阿利夸姆！
除消费者权益保护法、无选择权法外，还应遵守《世界人权公约》的规定，并视为具有最高权力的国家。最重要的是，beatae值得一试。

html和css代码在哪里？你在css中使用背景图像的封面吗？使用标题上导航和徽标所在的绝对位置。。。对于img容器来说不是绝对的…mlegg-我一直在尝试添加代码，但有人编辑了我的问题，不允许我重新保存。DaniP-如果我尝试这样做，这仍然是响应吗？快速示例添加此代码似乎使图像适合屏幕高度，但屏幕高度不保持纵横比//强制所有图像的纵横比为5:1。viewportRatio（5，1）；//混合比率维度。视口比率（@x，@y）{宽度：100vw；高度：@y*100vw/@x；最大宽度：@x/@y*100vh；最大高度：100vh；}div{//强制所有人的比率为5:1。视口比率（5，1）；背景色：蓝色；边距：0；位置：绝对值；顶部：0；右侧：0；底部：0；左侧：0；}这个解决方案会给顶级容器之外的内容带来巨大的问题，从正常的文档流中提取内容不是一个好主意，除非绝对必要（这里不是）。arun-我不喜欢强制这个比率。感谢您的帮助：）您需要指定容器的高度才能显示整个背景图像。。。因此，固定高度或响应行为使用填充技巧。@DaniP op可能有此要求，但从我所读到的内容来看，我不确定他是否希望这样做，或者在调整浏览器大小时背景图像不被拉伸……如果我解释得不好，我表示歉意，但我希望DaniP解释清楚。

.background-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: url('someimg.jpg') center center / no-repeat cover;
}