如何实现<img>高度自适应<h2>高度？CSS能否无需JS实现？

架构老林

2026-5-27

如何让图片高度自适应

高度（仅用CSS实现）

嘿，这个需求完全不需要JavaScript，只用CSS就能完美解决！下面给你两种实用的方案，根据你的布局场景选择即可：

方案1：Flexbox布局（最推荐）

这是现代布局的首选方案，浏览器兼容性好，实现起来简单直观。核心思路是把

和放在一个弹性容器里，让它们自动共享容器高度，同时保证

的下划线对齐底部。

示例代码：

/* 包裹标题和图片的容器 */
.title-group {
  display: flex;
  align-items: stretch; /* 强制子元素高度撑满容器 */
  gap: 12px; /* 标题和图片之间的间距，可按需调整 */
}

.title-group h2 {
  margin: 0;
  border-bottom: 2px solid #333; /* 模拟标题的下划线 */
  display: flex;
  align-items: flex-end; /* 让标题文字靠底部，下划线对齐容器底部 */
}

.title-group img {
  object-fit: contain; /* 保持图片比例，避免拉伸变形 */
  width: auto; /* 让宽度随高度自适应 */
}

效果说明：

当
文字较多、高度变大时，图片会自动拉伸到相同高度，和下划线齐平；
当
文字较少、高度变小时，图片也会同步缩小，完全匹配
的高度；
object-fit: contain能确保图片不会被强制拉伸变形，保持原有比例。

方案2：Grid布局（适合复杂网格场景）

如果你的页面本身用Grid布局，这个方案更契合，原理和Flexbox类似：

示例代码：

.title-group {
  display: grid;
  grid-template-columns: auto auto; /* 两列自动宽度 */
  align-items: stretch;
  gap: 12px;
}

.title-group h2 {
  margin: 0;
  border-bottom: 2px solid #333;
  display: flex;
  align-items: flex-end;
}

.title-group img {
  object-fit: contain;
  width: auto;
}