如何让MJML中mj-image填充容器高度与文本列等高？

要让图片列和右侧文本列高度完全匹配，核心是让图片容器（列）与文本列等高，同时图片填满容器。由于邮件客户端对CSS属性的支持有限，推荐两种方案：

方案一：背景图实现（全客户端兼容） #

将图片作为列的背景图，而非使用<mj-image>标签，这样背景图会自动填满整个列的高度，且适配文本列的高度。

修改后的完整代码：

<mj-section padding="0" background-color="#856555" direction="rtl">
  <!-- 图片列：用背景图替代mj-image -->
  <mj-column 
    width="50%" 
    background-image="https://example.com/image.jpg" 
    background-size="cover" 
    background-position="center center" 
    padding="0"
  >
  </mj-column>

  <mj-column width="50%" padding="20px">
    <mj-raw>
      <span style="color: #fff; opacity: .5; float: left; margin-right: 16px">OUR</span>
      <span style="color: #fff; opacity: .5; float: right;">ATHLETES</span>
    </mj-raw>

    <mj-text color="#fff" padding="40px 0 32px" font-size="36px" line-height="1.3"> 101 <br> LOREM IPSUM </mj-text>
    <mj-text color="#fff" padding="0 0 16px" font-size="14px" line-height="1.4">
        Lorem ipsum dolor[...]
    </mj-text>
    <mj-button mj-class="btn-white" align="left"> SCOPRI </mj-button>
  </mj-column>
</mj-section>

关键修改点：

• 给图片列设置固定宽度（如50%），和文本列均分宽度
• 用background-image替代<mj-image>，通过background-size: cover让图片填满容器，background-position: center保证图片居中显示

方案二：object-fit属性（仅支持现代邮件客户端） #

如果只需要兼容支持object-fit的客户端（如Gmail、Apple Mail），可以保留<mj-image>，通过自定义CSS强制图片填满容器高度：

修改后的图片列代码：

<mj-column padding="0" vertical-align="top">
  <mj-image
    src="https://example.com/image.jpg"
    padding="0"
    fluid-on-mobile="true"
    css="height: 100%; object-fit: cover;"
  />
</mj-column>

注意：Outlook等老旧客户端不支持object-fit，会导致图片拉伸变形，所以优先推荐方案一。

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