如何实现图片与标题文本并排并适配文本高度容器且保持比例？

需要在标题文本旁添加Logo，要求：

• 图片保持宽高比，适配文本高度的容器
• 图片与文本横向居中排列
• 父容器不设固定高度，随文本高度自适应

之前尝试table布局、before伪元素均无效，现有代码无法达到预期效果，以下是可行的解决方案：

修改后的代码 #

HTML #

<div class="batman">
  <img src="https://i.imgur.com/JSWi9SB.png" alt="Logo" />
  <span>title goes here</span>
</div>

CSS #

.batman {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px; /* 可根据需求调整图片与文本的间距 */
}

.batman img {
  height: 1em; /* 匹配当前文本的字体大小，保证高度一致 */
  width: auto; /* 自动计算宽度，维持图片原有宽高比 */
}

实现原理 #

• 采用flex布局，通过align-items: center实现图片与文本的垂直居中对齐，父容器高度会自动适配文本行高，无需设置固定高度
• 图片使用height: 1em，1em等同于当前字体大小，确保图片高度与文本高度匹配；width: auto保证图片按原有比例缩放，不会变形
• gap属性用于控制图片和文本之间的间距，可根据实际需求调整数值

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