横图放进正方形封面，怎样比较裁切与留白

操作步骤

1. 打开工具，保留素材1200×800、容器300×300、水平和垂直位置50的示例。选择cover。
2. 核对450×300的渲染尺寸、左偏移−75、上偏移0；示意图两侧被裁掉，白色圆形保持圆形。
3. 改为contain，核对300×200、左偏移0、上偏移50。容器上下出现灰色留白。
4. 切回cover，把水平位置改为0，再改100；核对左偏移从0变成−150。复制或下载CSS，应用到已有固有尺寸的img或video元素。

跟着示例试一次

商品横图要进入方形列表封面，cover填满容器但丢掉左右各75像素的渲染内容；contain保全内容但上下各留50像素。这里的像素是渲染后尺寸，不是源图裁切坐标。

.media {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: 50% 50%;
}

怎样确认结果正确

cover比例为0.375，1200×0.375=450，800×0.375=300；contain比例为0.25。object-position按容器减渲染内容的尺寸差乘百分比：水平居中为(300−450)×50%=−75。导出的CSS应含300px的宽高和所选模式、位置。

常见问题与边界

这不是图片文件裁剪工具，不上传或保存素材。预览使用示意图，会为显示区域等比缩小。fill会拉伸，none保持固有尺寸，scale-down取none与contain中较小者。参数限整数；背景图片、响应式约束、边框与内边距需在真实页面另行核对。