Flexbox子元素图片移动端拉伸，浏览器调试模式显示正常问题求助

问题分析 #

你的代码存在几个关键问题导致手机端图片拉伸：

• max-w-100 不是Tailwind的有效类，无法正确限制图片宽度
• 移动端flex-col布局下，flex-1会强制拉伸图片高度填充容器，且未设置图片比例保持属性
• 缺少object-fit控制图片显示方式，导致尺寸变化时比例失衡

修复后的代码 #

<div className="flex items-center gap-16 flex-col md:flex-row">
    <div className="flex-1 flex gap-7 flex-col items-start">
        ... sibling content
    </div>
    <img 
        src={`/image.png`} 
        className="max-w-full rounded-lg md:flex-1 h-auto object-contain"
    />
</div>

关键修改点 #

• 替换max-w-100为max-w-full：确保图片宽度始终适配容器宽度
• 把flex-1改为md:flex-1：仅在桌面端（md及以上尺寸）让图片占据剩余空间，移动端取消强制拉伸
• 添加h-auto：让图片高度自动按比例适配宽度，避免强制拉伸
• 添加object-contain：保持图片完整比例显示，不会裁剪或拉伸（若需填充容器并裁剪多余部分，可改用object-cover）

额外调整建议 #

如果希望移动端图片保持一定高度且比例不变，可添加最大高度限制，比如max-h-[300px]，配合object-contain/object-cover按需使用。

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