研发工具 · 图片布局

CSS 图片填充预览

先用素材尺寸确认封面裁切还是留白，再调整 object-position。预览使用自带示意图，不读取图片。

1. 配置尺寸与位置

素材宽度 px素材高度 px容器宽度 px容器高度 px水平位置 %垂直位置 %

填充模式

素材 1–10000 px，容器 1–1600 px，位置 0–100%，均为整数。

渲染尺寸 450 × 300 px；左偏移 -75 px，上偏移 0 px。负偏移表示内容超出容器。

示意框按空间等比缩小。fill 可能拉伸白色圆形；cover 会裁切，contain 可能留白。

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

用于有固有尺寸的 img/video 内容盒，不用于背景图片。这里不修改、上传或保存文件，也不生成裁剪后的图片。CSS 固定像素尺寸；响应式尺寸、边框和内边距需在实际页面另行确认。位置百分比按容器与渲染内容的尺寸差计算，50% 表示居中。