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