使两张图片的弹性布局一个位于页面顶部一个位于页面底部

可以使用 Flex 布局来实现两张图片的弹性布局，并让一个位于页面顶部，一个位于页面底部。以下是一个示例：

HTML 代码：

<div class="container">
  <img src="image1.jpg" alt="图片1"/>
  <img src="image2.jpg" alt="图片2"/>
</div>

CSS 代码：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.container img {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

上述代码将一个 class 为 container 的 div 元素设置为 Flex 容器，并将其子元素按照垂直方向排列。`justify-content: space-between` 属性将两个子元素分别放置在容器的顶部和底部。

每个子元素都是一个图片，使用了 `flex: 1;` 属性，表示它们会平分剩余的空间，因此两张图片的高度会根据容器的高度自动调整。`width: 100%;` 属性将图片的宽度设置为容器的宽度，`object-fit: cover;` 属性可以保证图片不变形，同时填满整个容器。

这样，就可以实现两张图片的弹性布局，并让一个位于页面顶部，一个位于页面底部。