CSS实现容器内元素自适应对齐：高容器底对齐，矮容器顶对齐

场景：有一个container div容器，内部包含一个元素（示例为图片），需求如下：

• 当容器div高度大于内部元素时，内部元素置于容器底部；
• 当容器div高度小于内部元素时，内部元素置于容器顶部，底部被裁剪。

当前难点是内部元素高度不固定，希望用纯CSS实现（JavaScript实现会简单很多）。

部分解决方案（内部元素高度固定时） #

当内部元素高度已知且固定时，已实现预期效果，代码如下：

CSS代码 #

.container {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: red;
  overflow: clip;
  height: 100vh;
  position: relative;
  container-type: size;
}

.inner {
  background-image: linear-gradient(green, yellow);
  height: 400px;
  width: 200px;
}

.option1 {
  position: absolute;
  @container (max-height: 400px) {
    top: 0;
  }
  @container (min-height: 400px) {
    bottom: 0;
  }
}

HTML代码 #

<div class="container">
  <div class="inner">
  </div>
</div>

不确定这个方案能否作为通用解决方案的起点，如果能在@container查询中直接获取内部元素的高度，问题就能轻松解决。

内容的提问来源于stack exchange，提问作者JP-Ellis