保持全屏图像的宽高比

Question

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

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

我遇到的问题是，如果我使用背景图像，我必须在px中指定图像高度。如果我使用img而不是我似乎只能使用绝对定位来使用它（导航栏位于顶部），这反过来又不允许我将第二个div放在第一个div之下。

为快速整理图像道歉，我希望它能说明我的目标。

Answer 1

要继续使用img标记，您需要将“标题”元素放在absolute位置的内容上，而不是位置absolute img的容器：

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>

Answer 2

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

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

Answer 3

要实现上面提到的设置，有一种方法可以使用背景位置，并且仍然可以保留其尺寸。覆盖在顶部的文本需要绝对定位，这样才能做出您需要做出的决定。这里是顶部图像部分的设置，在这种情况下表现为图像具有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。如果您对此处的实施有任何疑问，请与我们联系。

Answer 4

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