适配屏幕尺寸调整图片/文本块高度平衡的技术问询

优先方案：纯CSS实现（推荐） #

用Flexbox+媒体查询就能搞定，完全不需要JS，性能更好且逻辑清晰：

基础CSS（桌面端） #

/* 容器设置为flex，子元素默认等高 */
.image-text-container {
  display: flex;
  gap: 1.5rem; /* 图片和文本的间距 */
  margin-bottom: 2rem;
}

/* 桌面端图片固定宽度，高度自适应容器（和文本等高） */
.image-wrap img {
  width: 320px;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

/* 文本块占剩余宽度，高度随容器自动拉伸 */
.text-block {
  flex: 1;
  padding: 1rem;
  box-sizing: border-box;
}

移动端适配（媒体查询） #

/* 断点可根据你的需求调整，比如768px */
@media (max-width: 768px) {
  .image-text-container {
    flex-direction: column; /* 堆叠元素 */
  }

  .image-wrap img {
    width: 100%; /* 全屏宽度 */
    height: auto; /* 恢复图片原始比例，避免裁剪 */
    object-fit: initial; /* 取消桌面端的cover规则 */
  }

  .text-block {
    height: auto; /* 让文本自由换行展示 */
  }
}

对应的HTML结构示例：

<div class="image-text-container">
  <div class="image-wrap">
    <img src="your-image.jpg" alt="描述文本">
  </div>
  <div class="text-block">
    <h3>标题</h3>
    <p>这里是文本内容，会自动填充高度，和图片保持等高（桌面端）</p>
  </div>
</div>

备选方案：修改JS逻辑适配移动端 #

如果必须保留原有的JS方案，需要添加视口宽度判断，在移动端移除等高规则：

修改后的JS代码（含防抖优化） #

// 定义移动端断点（和CSS保持一致）
const MOBILE_BREAKPOINT = 768;

// 防抖函数，避免resize频繁触发
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

function adjustCommonHeight() {
  const containers = document.querySelectorAll('.image-text-container');
  
  // 先清除所有手动设置的高度
  containers.forEach(container => {
    const img = container.querySelector('.image-wrap img');
    const text = container.querySelector('.text-block');
    img.style.height = '';
    text.style.height = '';
  });

  // 仅在桌面端应用等高规则
  if (window.innerWidth > MOBILE_BREAKPOINT) {
    containers.forEach(container => {
      const img = container.querySelector('.image-wrap img');
      const text = container.querySelector('.text-block');
      const targetHeight = Math.max(text.offsetHeight, img.offsetHeight);
      img.style.height = `${targetHeight}px`;
      text.style.height = `${targetHeight}px`;
    });
  }
}

// 初始化执行
adjustCommonHeight();

// 监听窗口大小变化
window.addEventListener('resize', debounce(adjustCommonHeight));

方案对比 #

• 纯CSS方案：代码更简洁，无JS执行延迟，适配更稳定，优先选用。
• JS方案：仅适合需要动态计算高度的特殊场景（比如内容实时更新），但需要维护防抖逻辑避免性能问题。

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