如何使兄弟元素高度与最短元素一致？自适应图片容器适配方案

我来分享下针对这个作品集项目预览模块的两种可靠实现方案，完美解决你提到的兄弟元素高度与最短元素一致、图片缩放保持宽高比且右侧容器同步缩高的需求：

方案一：Flexbox 布局实现 #

Flexbox 是处理这类对齐布局的经典方案，利用其默认的高度拉伸特性，搭配图片比例控制，就能轻松实现需求。

核心代码 #

/* 父容器：Flex 布局，子元素默认高度拉伸对齐 */
.project-preview {
  display: flex;
  align-items: stretch; /* 默认值，可省略，确保子元素高度匹配 */
  gap: 1.5rem; /* 图片和信息容器的间距 */
  margin-bottom: 2rem;
}

/* 左侧图片：固定宽度比例，保持宽高比 */
.project-image {
  flex: 0 0 40%; /* 固定占比，不随容器伸缩 */
  aspect-ratio: 16/9; /* 设定图片宽高比，比如16:9 */
  object-fit: cover; /* 图片按比例填充容器，避免拉伸变形 */
}

/* 右侧信息容器：占据剩余空间，内部可纵向布局 */
.project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #f5f5f5;
}

原理说明 #

• Flex 容器的 align-items: stretch 会强制所有子元素高度与容器高度一致，而容器高度由最矮的子元素（这里是随窗口缩小的图片）决定，自然实现高度同步。
• aspect-ratio 属性让图片在宽度变化时自动计算对应高度，保证宽高比不变；如果需要兼容旧浏览器，可以用「padding-top 比例法」替代（给图片套一层容器，设置 padding-top: 56.25% 对应16:9，再把图片绝对定位填充容器）。
• object-fit: cover 确保图片在容器内按比例裁剪填充，不会出现拉伸变形，非常适合作品集的预览图展示。

方案二：Grid 布局实现 #

Grid 布局的写法更简洁，天生支持网格项的高度自动对齐，是现代浏览器下的最优选择。

核心代码 #

/* 父容器：Grid 布局，分配左右列宽 */
.project-preview {
  display: grid;
  grid-template-columns: 40% 1fr; /* 左列占40%，右列占剩余空间 */
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* 左侧图片：宽度100%填充列，保持宽高比 */
.project-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* 右侧信息容器：自动继承行高，内部可自由布局 */
.project-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 可选：让内容上下分布 */
  padding: 1rem;
  background-color: #f5f5f5;
}

原理说明 #

• Grid 布局中，同一行的所有网格项默认会自动匹配高度，无需额外设置对齐属性。
• 图片通过 aspect-ratio 保持宽高比，当窗口缩小、图片宽度变小时，高度会按比例降低，右侧信息容器的高度会自动同步，完全符合需求。
• Grid 的写法更直观，代码量更少，适合现代浏览器环境（目前主流浏览器都已全面支持Grid）。

额外提示 #

• 如果需要让信息容器的内容在高度不足时也能撑满（比如图片很高时），两种方案都可以通过内部的 Flex 布局实现（比如给 .project-info 添加 justify-content: space-between 或 flex-grow: 1）。
• object-fit 的其他取值（比如 contain）可以根据需求调整，cover 是作品集预览图的常用选择，能保证图片主体完整且填充容器。

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