UD5工具箱
FAQ - 常见问题解答
fill、contain、cover 三种模式的核心区别是什么？
这三种模式的根本区别在于对图片宽高比的处理方式。fill 是默认模式，它不保持图片宽高比，强制将图片拉伸以完全填满容器，可能导致图片变形。contain 保持图片宽高比，将图片等比缩放至完全显示在容器内，如果图片与容器宽高比不同，会在容器内留白。cover 同样保持宽高比，但将图片等比缩放至完全覆盖容器，超出部分会被裁剪。简单记忆：fill 拉伸填满、contain 完整显示不裁剪、cover 填满不留白。
none 和 scale-down 分别适用于什么场景？
none 保持图片原始尺寸不做任何缩放，适用于需要以原始分辨率展示图片的场景，如像素艺术作品、需要展示细节的医学图像、或图标等固定尺寸元素。scale-down 是 none 和 contain 的智能组合，它会选择两者中较小的显示效果。如果图片比容器大，scale-down 会等比缩小以适配容器（等同 contain）；如果图片比容器小，它不会放大（等同 none）。scale-down 适用于不确定图片尺寸与容器关系的场景，确保图片既不被裁剪也不会被不必要地放大。
object-position 的百分比是如何计算的？
object-position 的百分比计算公式为：
偏移量 = (容器尺寸 - 图片尺寸) * 百分比。例如，容器宽度为 300px，图片宽度为 200px，设置 object-position: 75% 50% 时，水平偏移量 = (300 - 200) * 75% = 75px，即图片距容器左侧 75px。当百分比为 50% 50% 时，偏移量为差值的一半，图片居中显示。理解这个公式有助于精确定位图片的可见区域，尤其在裁剪场景中非常实用。object-fit 和 background-size 有什么区别？各自适用什么场景？
两者的核心区别在于作用对象不同。background-size 作用于元素的背景图，适用于
<div>、<section> 等普通元素，需要通过 CSS 的 background-image 属性设置图片。object-fit 作用于替换元素（如 <img>、<video>）的内容，直接控制元素本身的图片显示方式。选择建议：如果图片是内容的一部分（如文章插图、商品照片），使用 <img> + object-fit；如果图片是装饰性背景（如页面背景、卡片底图），使用 background-image + background-size。object-fit 的优势在于图片对 SEO 友好、支持无障碍访问，而 background-size 在层叠控制上更灵活。object-fit 和 object-position 的浏览器兼容性如何？
object-fit 和 object-position 在现代浏览器中已有良好的支持：Chrome 31+（2013年11月起）、Firefox 36+（2015年2月起）、Safari 10+（2016年9月起）、Edge 16+（2017年10月起）。对于需要兼容 IE 浏览器的项目，可以使用 polyfill 库（如 object-fit-images）来模拟支持。在移动端方面，iOS Safari 10+ 和 Android Chrome 31+ 均已支持。如果你的项目只需要支持近三年的浏览器版本，可以放心使用这两个属性而无需额外的兼容性处理。
如何在保持图片比例的同时实现头像裁剪？
推荐使用
object-fit: cover 配合 object-position 来实现头像裁剪。具体做法是：设置容器为正方形（如 width: 120px; height: 120px;），图片设置 object-fit: cover 让图片等比缩放并填满容器，然后通过 object-position: 50% 30% 将定位点上移到人物头部区域（避免裁掉头顶）。如果需要圆形头像，再配合 border-radius: 50% 即可。这种方案的优势在于一张图片可以在不同尺寸的头像容器中自适应显示，无需为每种尺寸单独裁剪图片，非常适合用户头像、评论区头像等场景。在响应式设计中，如何让图片在不同屏幕尺寸下自适应？
在响应式设计中，推荐使用
object-fit: cover 或 object-fit: contain 配合宽度 100% 来实现图片自适应。基础写法为：img { width: 100%; height: auto; object-fit: cover; }。对于卡片封面图等需要固定高度的场景，设置固定高度并使用 cover 模式确保图片填满而不变形。对于需要完整展示的图片（如产品详情图），使用 contain 模式确保不裁剪。同时建议设置 max-width: 100% 防止图片溢出容器。如果需要为不同断点设置不同的 object-position，可以使用媒体查询来调整定位参数。object-fit 对 SEO 有影响吗？
object-fit 本身对 SEO 没有直接的正面或负面影响，搜索引擎主要关注的是 HTML 标签中的语义信息（如 alt 属性、文件名、周围文本等），而非 CSS 样式。但需要注意的是，使用 object-fit: cover 裁剪图片可能导致图片的关键内容被隐藏，如果搜索引擎通过图片内容来理解页面主题，可能会影响相关性判断。建议在使用 cover 模式裁剪时，通过 object-position 确保图片的核心内容可见，同时为所有图片添加准确的 alt 属性描述。对于对 SEO 极其重要的图片（如产品图、信息图），优先考虑 contain 模式以完整展示内容。
object-fit 能用于 video 元素吗？
可以。object-fit 和 object-position 同样适用于
<video> 元素。在视频播放器中，object-fit 的使用方式与图片完全一致。例如，使用 object-fit: cover 可以让视频填满播放器容器并裁剪多余部分，适用于全屏视频背景；使用 object-fit: contain 可以确保视频内容完整显示在播放器内，适用于需要看到完整画面的场景。需要注意的是，部分旧版浏览器对 video 元素的 object-fit 支持可能不完善，建议在目标浏览器中进行充分测试。