当我们在网站中使用图片时，经常会遇到需要调整图片尺寸和裁剪的情况。而对于一些特殊的图片，例如头像或者产品展示图，我们希望在调整尺寸的同时能够保持图片的主体内容不被裁剪。这时，CSS 中心裁剪就是一种非常实用的技巧。本文将会介绍什么是 CSS 中心裁剪，以及如何使用它来调整图片的尺寸和显示效果。

思路1：

• 比如展示图片为100px*100px，图片原比例为3：2，
• 用100除以短边的比例2，在乘上长边的比例3，为150，这样我们定义背景图为150px*100px
• 使用图片的position center center
• 如果图片的尺寸小于100*100，则需要另外处理（可以不用上诉步骤）

css
width: 100px;
height: 100px;
background-size: 150px 100px;
background-position: center center;
background-image: url('./assets/gogopher.jpg');

思路2：

• 展示图片原比例宽高，比如480*320
• 通过图片裁剪属性，裁剪掉长边160px(clip-path属于上下，左右同时裁剪，80*2)
• 裁剪后，图片为320320，使用缩放，还原到100100
• 如果图片的尺寸小于100*100，则需要另外处理

css
width: 480px;
height: 320px;
background-size: 480px 320px;
background-image: url('./assets/gogopher.jpg');
clip-path: inset(0px 80px);
transform: scale(0.3333333);