Question

我的网站顶部有一张大图片，用作初始图片。图像宽度为视口的100％，并且视视口的大小（保持宽高比）而定，图像会被垂直剪切。

运行以下代码段，打开全页视图，并调整浏览器窗口的大小，以了解我的意思。或者，here's a 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的 max （为顶部的div和下面的内容留出空间）。
如果无法显示完整图像，则图像的 top 会被裁剪（而不是底部，这是正常现象）。
- 如果图像缩小（即，如果窗口变窄），则包含的div高度将缩小以匹配图像的高度，因此上下没有任何浪费的空间。

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>

我希望这能回答您的问题。

Answer 2

尝试将图像转换为background图像，然后设置：

background-size: cover;
background-position: bottom;-背景图像的位置将在底部居中

#logo {
  height: 100px;
}

#header {
  width: 100%;
  overflow: hidden;
}

#header img {
  width: 100%;
}

.header__img {
  background: url(https://justus.ws/silence.jpg);
  width: 100%;
  height: calc(100vh - 200px);
  background-position: bottom;
  background-size: cover;
}

<div id="logo">
  I'm a div. I probably contain a logo and I take up 100px at the top.
</div>
<div id="header">
  <div class="header__img"></div>
</div>

<div id="content">
  <p>And I'm some content. Weeeee!</p>
</div>

Answer 3

我知道了，伙计们！谢谢大家的回答。

#logo {
  height: 100px;
  background-color: green;
}

#header img {
  width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: cover;
  object-position: 100% 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的底部，裁剪图片的顶部

3 个答案: