右侧图片在双栏布局中被压缩或错位，根本原因是父容器未明确宽度且默认flex收缩内容；应设右栏flex: 0 0 宽度、img用max-width:100%和height:auto、禁用width:100%，并避免overflow裁剪。
双栏布局中右侧图片被压缩或错位
直接给右栏 img 设 width: 100% 或 max-width: 100% 很可能失效——因为父容器（比如 .right）本身没明确宽度，或者被 flex/gap/overflow 等隐式规则截断。常见现象是图片只显示左上角一小块、高度塌陷、或横向溢出滚动条。
根本原因是：大图需要「容器撑开 + 内容不裁剪 + 比例可控」三者同时满足，而默认 flex 容器会收缩内容以适应布局流。
- 确保右栏容器有明确的
flex-basis或width，不要只靠flex: 1放任它“猜”宽度 - 给
img加height: auto和max-width: 100%，禁用width: 100%（它会强制拉伸变形） - 若图片仍被父容器
overflow: hidden裁剪，检查是否误加了overflow或clip-path - 避免在
img外层再套一层div并设width——多一层嵌套就多一层尺寸干扰
用 Flex 实现右侧固定宽 + 图片自适应
当你要右侧稳定展示一张大图（比如 400px 宽），且左侧内容自适应时，不能只依赖 flex: 1，必须显式控制右栏基线。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
gap: 2rem;
}
.left {
flex: 1;
}
.right {
flex: 0 0 400px; /* 不伸缩、不收缩、基础宽 400px */
}
.right img {
max-width: 100%;
height: auto;
display: block; /* 防止底部多出空白间隙 */
}-
flex: 0 0 400px比width: 400px更稳，避免内容撑宽后右栏被压缩 - 如果图片实际尺寸远大于 400px（如 1200×800），
max-width: 100%会自动等比缩放到容器宽度内，不会模糊 - 加
display: block是为了消除img默认的 inline 行内行为导致的底部留白
Grid 下右侧图片撑满整列但保持比例
如果你用 CSS Grid 布局（比如 grid-template-columns: 1fr 350px），右栏列宽固定，但图片仍可能被拉伸或居左不居中。
关键不是改 img，而是控制它所在的网格单元格行为：
.container {
display: grid;
grid-template-columns: 1fr 350px;
gap: 2rem;
}
.right {
display: flex;
align-items: center;
justify-content: center;
}
.right img {
max-width: 100%;
height: auto;
object-fit: contain; /* 保证完整显示，不裁剪、不变形 */
}-
object-fit: contain是核心——它让大图在固定宽高容器里完整居中显示，留白也比拉伸强 - 别用
object-fit: cover，除非你明确要裁剪；它常导致人物头像被切掉 - 如果右栏需要响应式缩放（比如小屏变 280px），把
350px换成minmax(280px, 350px)，再配合媒体查询微调
图片过大时性能与加载问题
右侧放一张 3MB 的 WebP 大图，首屏加载会卡顿，尤其弱网下用户看到空白时间过长。
- 用
loading="lazy"属性延迟加载非首屏图片，但右侧主图建议去掉 lazy（否则可能闪一下才出现） - 提供
sizes和srcset，例如：<img src="img-400.jpg" srcset="img-400.jpg 400w, img-800.jpg 800w" sizes="(max-width: 768px) 100vw, 400px" alt="HTML怎么在双栏布局右侧展示大尺寸图片" > - 服务端启用现代格式（AVIF/WebP），并用
<picture></picture>回退到 JPEG —— 但注意：只有真正需要兼容老浏览器时才加，多数项目可直接用.webp - 如果图片是装饰性（无语义），加
alt=""；若是内容图（如作品截图），alt必须准确描述画面
最易被忽略的是：图片容器没有设置最小高度保护，当网络慢或图片加载失败时，右侧直接塌陷，破坏双栏视觉平衡。建议给 .right 加 min-height: 200px 或背景占位色。
