当图片遇上“变形金刚”：Object-fit 和 Object-position 的奇妙旅程
各位看官，今天咱们聊点儿前端里的小魔法，关于图片处理的。话说，图片这玩意儿，在网页里那是颜值担当，用得好能让网站蓬荜生辉，用不好嘛… 就像精心打扮的约会对象，结果穿了双不合脚的鞋，总觉得哪里不对劲。
尤其是当图片尺寸和容器尺寸不匹配的时候，那问题就来了。要么图片被强行拉伸，变成“胖头鱼”，要么被粗暴裁剪，只剩个“马赛克”，简直惨不忍睹。
别慌，CSS 早已为我们准备好了两件法宝：object-fit 和 object-position。它们就像两位技艺精湛的雕塑家，能让图片在容器里优雅地变形，完美地呈现，保证颜值在线。
Object-fit：图片界的“变形金刚”
首先登场的是 object-fit，这家伙可厉害了，它决定了图片在容器里如何“变形”以适应空间。你可以把它想象成一个变形金刚，能根据不同的指令，变幻出各种形态。
object-fit 有五个主要的取值，每个都身怀绝技：
-
fill(默认值)： 这是最简单粗暴的变形方式。它会忽略图片的原始比例，直接拉伸或压缩图片，填满整个容器。如果你追求的是“充满”，不在乎图片是否走形，那选它就对了。但通常情况下，这并不是一个理想的选择，除非你喜欢看到“胖头鱼”或者“长脸怪”。举个栗子： 想象一下，你有一张风景照，原本是广阔的山河美景。但如果设置了
object-fit: fill，它可能会被拉伸成一个又高又窄的“擎天柱”，山不再是山，水也不再是水，只剩下一片模糊的色块。 -
contain： 这个属性就像一个贴心的管家，它会尽量保持图片的原始比例，将图片完整地显示在容器内。如果图片的比例和容器的比例不一致，就会在图片周围留下空白区域。这种方式保证了图片的完整性，但可能会牺牲一些空间利用率。举个栗子： 还是那张风景照，这次我们设置
object-fit: contain。如果容器是一个正方形，那么图片可能会被缩小，上下或者左右留出空白，保证整个风景都能被看到，就像给照片加了一个边框一样。 -
cover： 这是一个更积极的“填充”方式。它也会保持图片的原始比例，但会放大或缩小图片，直到完全覆盖整个容器。如果图片的比例和容器的比例不一致，图片的一部分会被裁剪掉，以保证没有空白区域。这种方式牺牲了图片的完整性，但能最大限度地利用空间。举个栗子： 还是那张风景照，这次我们设置
object-fit: cover。如果容器是一个正方形，图片可能会被放大，左右或者上下超出容器的边界，超出部分会被裁剪掉，但整个容器都被风景填满了，视觉效果更震撼。 -
none： 这个属性就像一个“老古董”，它完全不改变图片的原始尺寸和比例，直接将图片放置在容器的左上角。如果图片比容器大，超出部分会被裁剪掉；如果图片比容器小，就会在容器里留下一块空白。举个栗子： 还是那张风景照，这次我们设置
object-fit: none。如果图片比容器大，那么只有左上角的一部分风景会被显示出来；如果图片比容器小，那么图片会静静地待在左上角，周围空荡荡的。 -
scale-down： 这个属性就像一个“智能管家”，它会比较contain和none两种方式，选择更合适的一种。如果图片的尺寸大于容器，它会采用contain的方式，缩小图片以适应容器；如果图片的尺寸小于容器，它会采用none的方式，保持图片的原始尺寸。举个栗子： 还是那张风景照，这次我们设置
object-fit: scale-down。如果图片很大，它会被缩小，保证完整显示在容器内；如果图片很小，它会保持原样，不会被放大或拉伸。
Object-position：图片界的“微调大师”
有了 object-fit 这个“变形金刚”，我们已经可以控制图片的基本形态了。但有时候，我们还需要对图片的位置进行更精细的调整，让它在容器里呈现出最佳效果。这时候，就轮到 object-position 出场了。
object-position 决定了图片在容器里的“定位”。你可以把它想象成一个微调大师，能让图片在容器里上下左右移动，找到最合适的展示位置。
object-position 的取值方式和 background-position 非常相似，可以使用以下几种方式：
-
关键字： 可以使用
top、bottom、left、right、center等关键字来指定图片的位置。例如，object-position: top left表示将图片定位在容器的左上角，object-position: center center表示将图片定位在容器的中心位置。举个栗子： 假设我们有一张人像照片，设置了
object-fit: cover，可能会裁剪掉人物的头部。这时候，我们可以使用object-position: bottom center，将图片定位在容器的底部中心，保证人物的脸部能够被完整显示。 -
百分比： 可以使用百分比来指定图片的位置。例如，
object-position: 20% 30%表示将图片定位在容器水平方向 20% 的位置，垂直方向 30% 的位置。举个栗子： 假设我们有一张风景照片，希望突出画面中的某个特定元素，例如一棵树。我们可以使用百分比来精确地定位图片，让这棵树出现在容器的黄金分割点上。
-
像素值： 可以使用像素值来指定图片的位置。例如，
object-position: 10px 20px表示将图片定位在容器左边 10 像素，上边 20 像素的位置。举个栗子： 这种方式通常用于对图片进行微调，例如将图片稍微向右移动几个像素，或者向上移动几个像素，以达到最佳的视觉效果。
Object-fit 和 Object-position 的完美搭档
object-fit 和 object-position 就像一对默契的搭档，它们可以协同工作，让图片在容器里呈现出千变万化的效果。
通常情况下，我们会先使用 object-fit 来控制图片的基本形态，例如选择 cover 来填充容器，或者选择 contain 来保持图片的完整性。然后，再使用 object-position 来对图片的位置进行微调，例如将图片居中显示，或者将图片定位在容器的某个特定角落。
一些实用技巧和注意事项
-
了解你的目标： 在使用
object-fit和object-position之前，先明确你的目标。你是想让图片完整显示，还是想让图片尽可能地填充容器？你是想突出画面的某个特定元素，还是想让整个画面保持平衡？ -
尝试不同的取值： 不要害怕尝试不同的取值，看看哪种效果最符合你的需求。你可以使用浏览器的开发者工具，实时调整
object-fit和object-position的值，观察图片的变化。 -
注意图片的比例： 不同的图片比例和容器比例，会产生不同的效果。在设计网页时，要考虑到图片的比例问题，选择合适的
object-fit和object-position取值。 -
兼容性问题： 虽然
object-fit和object-position的兼容性已经比较好了，但在一些老旧的浏览器中，可能无法正常工作。为了保证兼容性，可以使用一些 Polyfill 库，例如object-fit-images。
总结
object-fit 和 object-position 是 CSS 中非常实用的两个属性，它们能让我们轻松地控制图片在容器里的显示效果，避免图片变形或者被裁剪的问题，让网页的颜值更上一层楼。
下次当你遇到图片比例适配问题的时候，不妨试试这两件法宝，相信它们会给你带来惊喜。记住，图片是网页的灵魂，用得好能让网站充满活力，用不好就会让网站黯然失色。希望这篇文章能帮助你更好地理解 object-fit 和 object-position，让你的网页更加精彩！
最后，祝大家在使用 object-fit 和 object-position 的过程中，玩得开心，做出漂亮的网页！