文章目录
- 图片如何适应容器框
- 1. fill（默认值）
- 2. contain
- 3. cover
- 4. none
- 5. scale-down
图片如何适应容器框
1. fill（默认值）
规则：拉伸图片，强制让图片的宽高完全填满容器，不保持图片原有宽高比。
表现：容器被完全填充，但图片可能会变形（如果图片和容器比例不一致）。
你图中fill的效果看起来没变形，是因为示例里图片和容器的宽高比刚好一致～
2. contain
规则：保持图片宽高比，缩放图片至 “刚好完整显示在容器内”，容器未被填满的区域会留空白。
表现：图片完整显示，但容器可能有留白（比如容器是正方形，图片是长方形时，上下 / 左右会有空隙）。
3. cover
规则：保持图片宽高比，缩放图片至 “完全覆盖容器”，超出容器的部分会被裁剪。
表现：容器被完全填满，但图片可能会被裁掉边缘（比如图片是长方形，容器是正方形时，图片的长 / 宽会被剪去一部分）。
4. none
规则：不缩放图片，保持图片原始尺寸，直接放在容器里，超出容器的部分会被裁剪。
表现：你图中none对应的是 “只显示了鸟的局部”—— 因为原图尺寸比容器大，所以只露出了图片的一部分。
5. scale-down
规则：相当于 “自动选更小的显示方式”：
如果图片比容器大 → 按contain缩放（缩小到容器能容纳）；
如果图片比容器小 → 按none显示（保持原图大小）。
表现：图片会 “尽可能小” 地完整显示，你图中scale-down和contain效果一致，是因为原图缩小后刚好适配容器。
