如何调整图片适配表格行高，同时与居中文字行内对齐显示？

核心思路 #

无需给logo设置绝对定位，通过约束行高范围+限制图片最大高度，即可同时实现固定行高、logo与文本行内对齐、响应式适配三个需求：

• 给所有表格行统一设置最小/最大高度，使用相对单位适配不同窗口尺寸，避免内容撑开行高
• 给logo图片设置高度跟随行高自适应，宽度自动等比缩放，不会超出行高范围
• 保留原有flex布局的垂直对齐属性，保证文本、logo自动居中对齐

修改后代码示例 #

你可以直接替换原有行代码，所有行的行高会保持一致，且可响应式适配窗口变化：

<!-- 建议给所有tr加公共类统一样式，无需每行重复编写 -->
<tr style="width: 100%; min-height: 48px; max-height: 48px; background-color: rgba(158,158,158,1); color: #FFFFFF;">
    <td width="25%" style="margin:0; padding: 4px;" align="left">Wed <b>Sep 29</b></td>
    <td width="50%" style="padding: 4px; display: flex; align-items: center; justify-content: center; gap: 8px;">
        @ 
        <img src="球队logo路径" style="height: 2em; width: auto; padding: 4px;" alt="球队logo">
        Pirates
    </td>
    <td width="25%" style="padding: 4px; margin:0;" align="right">6:35 PM</td>
</tr>

关键修改说明 #

1. 行高约束：给<tr>设置相同数值的min-height和max-height，单位可根据需求更换为vh、rem等相对单位实现响应式，彻底避免内容撑开行高
2. 图片适配：logo设置height: 2em（可根据行高调整数值）、width: auto，图片会自动等比缩放适配高度，不会超出行高，也无需用绝对定位破坏行内布局
3. 对齐优化：中间单元格新增gap属性控制@、logo、文本的间距，align-items: center可自动让所有行内元素垂直居中对齐

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