如何避免Next.js中flexbox内图片拉伸容器高度？

• 外层容器使用 display: flex，设置 align-items: stretch 让子元素高度一致，同时用 gap 控制图片和文本的间距，确保文本换行时容器高度由文本内容决定。
• 给图片包裹一层容器，设置 position: relative、flex-shrink: 0（防止图片被压缩），并指定合适的宽度（比如 width: 120px），让图片容器和文本容器保持相同高度。
• 在 next/image 组件中，设置 fill 属性，搭配 object-fit: contain 保证图片保持原有宽高比并填满容器高度，不会拉伸变形；同时设置 sizes 属性适配响应式场景。

示例代码：

import Image from 'next/image';

export default function FlexImageText() {
  return (
    <div style={{ 
      display: 'flex', 
      alignItems: 'stretch', 
      gap: '16px', 
      padding: '16px', 
      maxWidth: '600px',
      border: '1px solid #eee'
    }}>
      {/* 图片容器 */}
      <div style={{ 
        position: 'relative', 
        flexShrink: 0, 
        width: '120px' 
      }}>
        <Image
          src="/your-image.jpg"
          alt="示例图片"
          fill
          sizes="(max-width: 600px) 120px, 150px"
          style={{ objectFit: 'contain' }}
        />
      </div>
      {/* 文本容器 */}
      <div style={{ flexGrow: 1 }}>
        <p>这里是短文本内容，当屏幕变小时，文本会自动换行，带动整个flex容器高度变化，图片会自动适配容器高度并保持宽高比。</p>
      </div>
    </div>
  );
}

关键说明：

• align-items: stretch 确保图片容器和文本容器高度完全一致，图片高度由文本内容的高度决定。
• flex-shrink: 0 避免图片容器在空间不足时被压缩，保证图片宽度稳定。
• object-fit: contain 让图片在容器内按原有比例缩放，填满高度的同时不会超出容器，也不会拉伸变形；如果需要图片填满容器宽度且允许裁剪，可换成 object-fit: cover。

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