使用object-fit和flex属性可解决弹性盒子中图片比例错乱问题。通过设置object-fit:cover或contain保持图片比例，结合flex:1、min-width:0和width:100%等样式，使图片在弹性容器中自适应尺寸且不变形，实现美观布局。
弹性盒子（Flexbox）中图片比例错乱，通常是因为图片默认会拉伸或压缩以适应容器尺寸。解决这个问题的关键是结合 object-fit 和正确的 flex 属性设置，保持图片的原始比例同时实现良好的布局控制。
使用 object-fit 保持图片比例
object-fit 属性用于定义替换元素（如 img 或 video）的内容如何填充其容器。常用值包括：
- object-fit: cover; —— 图片保持比例缩放并填满容器，超出部分被裁剪。
- object-fit: contain; —— 图片保持比例完整显示在容器内，可能留白。
- object-fit: fill; —— 图片拉伸填满容器，不保持比例（容易变形）。
推荐使用 cover 或 contain 来避免比例错乱。
配合 flex 属性控制容器行为
在 Flex 容器中，图片所在的父元素可能会动态改变尺寸，导致图片被挤压。通过设置合适的 flex 属性可防止这种情况：
立即学习“前端免费学习笔记（深入）”；
- 给图片容器设置 flex-shrink: 0; 防止被压缩。
- 使用 min-width: 0; 在必要时允许内容正常收缩（适用于复杂嵌套）。
- 将图片设为 width: 100%; 并配合 height: auto; 或固定高度 + object-fit 控制显示效果。
实际示例：保持图片比例的弹性布局
以下是一个常见场景：多个图片卡片在弹性容器中等宽排列，每张图保持 16:9 比例且不被拉伸。
.container {
display: flex;
gap: 10px;
}
.card {
flex: 1;
min-width: 0; / 允许内容正常收缩 /
}
.card img {
width: 100%;
height: 120px; / 固定高度或使用 aspect-ratio /
object-fit: cover;
border-radius: 8px;
}
这样即使容器宽度变化，图片也不会变形，始终以覆盖方式填满指定区域。
基本上就这些。合理使用 object-fit 和 flex 相关属性，就能在弹性布局中完美控制图片比例。不复杂但容易忽略细节。
