如何不硬编码高度实现图片适配CSS区块并固定在底部？

我需要在不硬编码CSS区块高度的前提下，让图片始终适配背景区块（.shape）的底部位置，但切换分辨率时图片会偏离底部。试过inherit、auto等参数都没解决问题。

原代码 #

<div class="shape"></div>
<div id="banner">
  <img src="src/images/hero1.png" alt="" id="banner">
</div>

<style>
#banner {
    display: flex;
    align-items: start;
    justify-content: end;
    width: 70%;
    z-index: 2;
}

#banner img {
    max-width: 100%;
    height: auto;
    max-height: 90%;
}

.shape {
    background-color: var(--color-primary-2);
    width: 50%;
    height: 87.4%;
    position: absolute;
    border-radius: 40% 30% 20% 20%;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center; 
}
</style>

效果对比 #

• 原分辨率下效果：
• 其他分辨率下效果：

解决方案 #

问题核心是.shape和#banner为独立元素，无布局关联，导致分辨率变化时两者高度/位置比例脱节。通过以下调整修复：

修改后的代码

<!-- 添加相对定位父容器，统一布局参考 -->
<div class="hero-container">
  <div class="shape"></div>
  <div id="banner">
    <img src="src/images/hero1.png" alt="Banner图片">
  </div>
</div>

<style>
/* 父容器设为相对定位，作为内部绝对定位元素的参考基准 */
.hero-container {
  position: relative;
  min-height: 80vh; /* 用视口高度替代硬编码值，自适应屏幕 */
  width: 100%;
}

#banner {
  position: absolute;
  bottom: 0; /* 固定在容器底部 */
  right: 0;
  width: 70%;
  z-index: 2;
  display: flex;
  justify-content: end;
  padding: 0 2%; /* 可选：避免图片贴边 */
}

#banner img {
  max-width: 100%;
  height: auto;
  max-height: 90%; /* 限制图片最高为容器高度的90% */
}

.shape {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%; /* 高度占满父容器，取消硬编码百分比 */
  background-color: var(--color-primary-2);
  border-radius: 40% 30% 20% 20%;
  z-index: 1;
}
</style>

改动说明

1. 父容器.hero-container：设置相对定位，让.shape和#banner共享同一布局参考；用min-height:80vh替代硬编码高度，实现屏幕自适应。
2. #banner：改为绝对定位，通过bottom:0固定在容器底部，与.shape的高度联动，分辨率变化时位置保持同步。
3. .shape：高度改为100%，占满父容器高度，避免和图片布局脱节；移除无用的flex居中属性。

可选优化：保持形状宽高比

如果需要固定.shape的宽高比例，可替换height:100%为aspect-ratio：

.shape {
  aspect-ratio: 16/9; /* 自定义宽高比，比如16:9 */
  height: auto;
  width: 50%;
}

这样无论屏幕分辨率如何变化，图片都会固定在背景块底部，且无需硬编码高度值。

内容的提问来源于stack exchange，提问作者Robert