使用Flexbox实现两列等高布局的解决方案

没问题，咱们用纯 CSS/SCSS 就能搞定你要的效果，核心是利用 Flexbox 的天然等高特性，再配合图片专属属性控制显示，全程不需要 JavaScript~

1. 基础 HTML 结构参考 #

先给你一个和需求匹配的结构示例，你可以对应到自己的代码上：

<div class="content">
  <div class="content-text">
    <!-- 这里放你的普通内容，高度会随内容/屏幕尺寸自动伸缩 -->
    <h2>营销主题标题</h2>
    <p>这里是详细的营销内容，内容越多，.content 的整体高度就会跟着拉伸~</p>
  </div>
  <div class="marketing-image">
    <img src="你的图片地址" alt="营销展示图">
  </div>
</div>

2. SCSS/CSS 核心实现代码 #

下面是关键样式，我会逐点解释作用：

.content {
  display: flex; /* 开启 Flexbox 布局，自动让子元素保持等高 */
  width: 100%; /* 可根据需求调整，比如加 max-width: 1200px 限制最大宽度 */
  min-height: 300px; /* 可选，避免内容过少时布局过矮 */
}

.content-text {
  flex: 1; /* 让文本列自动占据剩余空间，和图片列按比例分配宽度 */
  padding: 2rem;
  background-color: #f5f5f5; /* 你需要的背景色 */
  /* 可选：让内容垂直居中，按需调整 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.marketing-image {
  flex: 1; /* 和文本列等分宽度，也可以设固定值比如 flex: 0 0 50% */
  overflow: hidden; /* 裁剪图片溢出容器的部分 */
}

.marketing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片保持比例铺满容器，超出部分自动裁剪 */
  /* 如果需要兼容旧浏览器，可替换为以下方案： */
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%; */
}

关键逻辑说明 #

• Flexbox 等高特性：父元素设置display: flex后，所有子元素默认会拉伸到与最高子元素一致的高度，完美解决“两列与.content高度同步”的需求。
• object-fit: cover：这个属性会让图片保持原有比例，同时填满整个容器，超出容器的部分自动被裁剪，刚好满足你“图片铺满div宽高且溢出裁剪”的要求。
• overflow: hidden：给图片容器加上这个属性，确保溢出的图片部分被隐藏，不会破坏整体布局。

如果你的现有代码有特殊结构，只需要把这些核心属性对应到你的类名上就行，完全不需要额外的 JavaScript 干预~

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