全屏显示图像的长宽比

debugcn 发表于 Dev

蚂蚁桦木

我希望将一个包含以下内容（从上到下）的网页放在一起：

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

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

对于快速整理的图片表示歉意，我希望它能说明我的目标。

丹尼

为了继续使用img标签，您需要做的是将“ header”元素放置在内容上，absolute而不放置absoluteimg的容器：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。