在全屏模式下保持图像的纵横比

Question

我希望制作一个网页，由以下内容组成（自上而下）：

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

问题在于，如果我使用“background-image”，我必须指定图像的高度为px。 如果我使用img，则似乎只能使用绝对位置来实现（导航栏在顶部），这反过来又不允许我将第二个div放置在第一个下面。

很抱歉快速凑成的图片，希望它能展示我想做的事情。

- AntBirch

---

你的HTML和CSS代码放在哪里了？你在CSS中使用cover来设置背景图片吗？ - mlegg

在导航和标志处的标题上使用绝对定位...图像容器不使用绝对定位... - DaniP

DaniP - 如果我尝试这个，它仍然会是响应式的吗？ - AntBirch

https://jsfiddle.net/t4t5z85e/ 快速示例 - DaniP

DaniP - 这正是我想要的，谢谢 :) 如果可以的话，我会标记为正确的。 - AntBirch

Answer 1

为了保持使用 img 标签，您需要做的是使用 absolute 定位而不是将 img 的容器定位为 absolute，并将 "header" 元素放置在内容上方：

header {
  position: absolute;
  width: 100%;
  background: rgba(0, 255, 255, .5);
  line-height: 75px;
  text-align: center;
  font-size: 3em;
}
div img {
  width: 100%;
}

<header>Logo & Nav</header>
<div>
  <img src="http://lorempixel.com/1000/500" alt="">
</div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quam, temporibus tenetur qui, sed magni. Praesentium, veritatis perferendis qui? Et accusantium, dicta natus libero iste atque voluptatem est. Dolore, consectetur.</div>
  <div>Eius obcaecati itaque assumenda fuga quam necessitatibus nam consectetur ab velit nostrum minus maxime ex temporibus autem iure, rem ea nihil totam sapiente perferendis praesentium ullam labore amet corrupti! Numquam!</div>
  <div>Esse accusantium excepturi sint deserunt praesentium repellat eius quibusdam ratione hic, modi blanditiis numquam tempore iusto, nisi dolore! Autem quis cumque mollitia atque perspiciatis vero animi eius quidem itaque enim.</div>
  <div>Deleniti magni ipsum illum odio, rerum ullam praesentium expedita vel impedit vitae ad eveniet voluptatem reiciendis reprehenderit omnis doloremque cumque assumenda, eligendi quas cupiditate sed numquam facere porro accusantium! Aliquam!</div>
  <div>Expedita nisi excepturi repudiandae quod provident animi numquam consequatur quidem, magnam non optio, saepe autem laudantium quis perferendis beatae veniam, quae assumenda deleniti eius cupiditate. Est, beatae deserunt facere magnam.</div>
</div>
<div>
  <img src="http://lorempixel.com/1000/1000" alt="">
</div>

- DaniP

Answer 2

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

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

- MattDiMu

---

为了显示整个背景图像，您需要指定容器的高度...因此，可以使用固定高度或响应式行为来使用填充技巧。 - DaniP

@DaniP 我们可能会有这个要求，但根据我所阅读的内容，我仍然不确定他是想要那个，还是只是希望在调整浏览器大小时不要拉伸背景图片... - MattDiMu

抱歉如果我没有解释清楚，但我想要的是DaniP所解释的。 - AntBirch

Answer 3

为了实现你上面提出的设置，有一种方法可以使用background-position并保持其尺寸。覆盖在其上的文本需要绝对定位，因此这是你需要做出的决定。以下是顶部图像部分的设置，这种情况下它表现得好像图像具有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。如果您对实现有任何疑问，请告诉我。

- ghost_dad

Answer 4

.className {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}

- arun

---

添加这段代码似乎可以使图像适应屏幕高度，但无法保持其宽高比。 - AntBirch

// 强制所有 <div> 的比例为 5:1 .viewportRatio(5, 1); - arun

// 用于比例尺寸的Mixin .viewportRatio(@x, @y) { width: 100vw; height: @y * 100vw / @x; max-width: @x / @y * 100vh; max-height: 100vh; }div { // 强制所有<div>的比例为5：1 .viewportRatio(5, 1); background-color: blue; margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } - arun

这种解决方案会在顶部容器之外的内容上造成巨大问题，而且从正常文档流中拉取内容并不是一个好主意，除非绝对必要（在这里并不是）。 - ghost_dad

Arun - 我不太喜欢强制比率的想法。不过还是谢谢你的帮助 :) - AntBirch