html - 将图像固定到 div 的底部，剪辑图像的顶部

Question

我有一个大图像，我在我的网站顶部用作启动图像。图像宽度是视口的 100%，图像会根据视口的大小垂直裁剪（同时保持纵横比）。

运行下面的代码片段，打开完整页面视图，然后调整浏览器窗口的大小以了解我的意思。或者，这是一个 Codepen

#logo {
  height: 100px;
}

#header {
  width: 100%;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

#header img {
  width: 100%;
}

<div id="logo">
  I'm a div. I probably contain a logo and I take up 100px at the top.
</div>
<div id="header">
  <img src="https://justus.ws/silence.jpg">
</div>

<div id="content">
  <p>And I'm some content. Weeeee!</p>
</div>

我希望它的行为方式是将图像固定到 div 的底部，并根据需要剪辑图像的顶部。我怎样才能做到这一点？

谢谢！

编辑：我正在尝试完成以下操作：

• 初始图像宽度始终为 100%。
• 高度最大为 100vw - 200px（为顶部的标题 div 和下面的内容腾出空间）。
• 如果无法显示完整的图像，图像的顶部会被剪裁（而不是底部，这将是正常行为）。
  • 如果图像缩小（即如果窗口变窄），则包含的 div 高度会缩小以匹配图像的高度，因此不会在上方或下方浪费任何空间。

标签： htmlcss

Answer 1

我会将图像设置为绝对位置，底部为零。

这是代码

#logo {
  height: 100px;
}

#header {
  width: 100%;
  height: calc(100vh - 200px);
  overflow: hidden;
  position: relative;
}

#header img {
  width: 100%;
  position: absolute;
  bottom:0;
}

<div id="logo">
  I'm a div. I probably contain a logo and I take up 100px at the top.
</div>
<div id="header">
  <img src="https://justus.ws/silence.jpg">
</div>

<div id="content">
  <p>And I'm some content. Weeeee!</p>
</div>

我希望这回答了你的问题。