UD5工具箱
核心术语解析
以下是与 CSS 图片填充相关的核心术语，每个术语都附有详细解释和使用场景说明。
object-fit
CSS 属性，用于指定替换元素（如 <img> 或 <video>）的内容应如何适应其所在的容器。它类似于 background-size 属性，但作用于元素内容而非背景图。object-fit 的可选值包括 fill、contain、cover、none 和 scale-down。默认值为 fill，即拉伸内容以完全填满容器，不保持原始宽高比。
object-position
CSS 属性，用于配合 object-fit 使用，指定替换元素的内容在容器内的对齐位置。它接受一个或两个值（水平和垂直），可以使用关键字（left、center、right、top、bottom）、百分比或长度值。例如 object-position: 50% 20% 表示水平居中、垂直方向距顶部 20%。默认值为 50% 50%，即居中对齐。
cover 模式
object-fit: cover 会保持图片的宽高比，同时确保图片完全覆盖容器。如果图片的宽高比与容器不同，图片会被等比缩放直到填满容器，超出部分会被裁剪。这是最常用的图片填充模式，适用于需要全屏背景图、卡片封面图等场景。裁剪方向由 object-position 控制，默认从中心裁剪。
contain 模式
object-fit: contain 会保持图片的宽高比，同时确保图片完整地显示在容器内。如果图片的宽高比与容器不同，图片会被等比缩放直到完全适合容器，容器内未被图片覆盖的区域会留白。这种模式适用于需要完整展示图片内容的场景，如商品详情图、证件照等。留白区域可通过 object-position 控制位置。
fill 模式
object-fit: fill 是默认值，它会让图片完全填满容器，不保持宽高比。如果图片的宽高比与容器不同，图片会被非等比缩放（拉伸或压缩）以完全适应容器。这种模式会导致图片变形，通常不推荐使用，除非你不介意图片的形变或者图片本身与容器宽高比一致。
none 模式
object-fit: none 保持图片的原始尺寸，不进行任何缩放。如果图片尺寸大于容器，超出部分会被裁剪；如果图片尺寸小于容器，未覆盖区域会留白。这种模式适用于需要以原始分辨率展示图片的场景，如像素艺术、细节展示等。定位由 object-position 控制，可调整裁剪或留白的区域。
scale-down 模式
object-fit: scale-down 的效果等同于在 none 和 contain 中选择较小的那个。具体来说，它会先分别计算 none 模式和 contain 模式下的显示效果，然后选择尺寸更小的那个作为最终显示。这意味着如果图片比容器大，它的表现等同于 contain；如果图片比容器小，它的表现等同于 none（不放大）。
替换元素
替换元素是指内容由外部资源决定的 HTML 元素，其渲染不受 CSS 盒模型直接影响。常见的替换元素包括 <img>（图片）、<video>（视频）、<iframe>（内嵌框架）和 <canvas>（画布）等。object-fit 和 object-position 属性专门作用于这类元素，因为它们的内容独立于 CSS 呈现。
宽高比（Aspect Ratio）
宽高比是图片或容器宽度与高度的比例关系。例如 16:9、4:3、1:1 是常见的宽高比。object-fit 的效果很大程度上取决于图片和容器的宽高比差异：当两者宽高比相同时，所有模式的表现几乎一致；当两者宽高比差异越大，不同模式之间的差异越明显。理解宽高比是选择正确填充模式的关键。
背景尺寸（background-size）
CSS 的 background-size 属性与 object-fit 功能类似，但作用于元素的背景图而非内容。background-size 支持 auto、cover 和 contain 三个值，其中 cover 和 contain 的行为与 object-fit 中的同名值一致。两者的核心区别在于：background-size 控制背景图，适用于 <div> 等普通元素；object-fit 控制内容图，适用于 <img> 等替换元素。
裁剪（Clipping）
在 object-fit 的上下文中，裁剪是指当图片的显示区域超出容器范围时，超出部分被隐藏的现象。在 cover 模式下，如果图片宽高比与容器不同，必然会发生裁剪。裁剪的具体位置由 object-position 控制——默认从中心裁剪，但可以通过调整 position 值来改变裁剪的起始点，确保图片的关键内容始终可见。
自适应布局
自适应布局是指界面元素能够根据容器尺寸自动调整外观的布局方式。object-fit 是实现图片自适应的重要工具之一，它让图片能够在不同尺寸的容器中自动适配，而无需为每种容器尺寸单独准备图片资源。结合 CSS Grid 或 Flexbox 使用时，object-fit 可以让响应式图片布局的实现变得更加简洁和高效。