使用object-fit:cover实现图片居中裁剪填充200x200px div容器

云原生阿岚

2026-8-29

问题说明

试过各类推荐实现方案，需求看似简单但始终达不到预期：现有一张非正方形图片，需要放入尺寸为200x200px的父级div容器，要求不改变图片原有宽高比，居中裁剪图片超出容器的部分，最终实现图中盘子居中显示的效果。

原有未达预期的代码

HTML部分

<div class="container">
  <img src="https://storage.googleapis.com/frese-product-images/25.jpg">
</div>

CSS部分

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.container > img {
    width: 200px;
    object-fit: cover;
    object-position: center center;
}

失效原因

父容器.container未声明display: flex，写入的justify-content: center、align-items: center是Flex布局专属属性，未触发Flex布局时这两个属性不生效
图片固定设置width: 200px，未设置高度适配规则，竖图状态下宽度撑满容器时高度溢出，默认顶部对齐导致核心内容（盘子）偏下，无法居中

修复代码

方案1：保留img标签的Flex实现（兼容原有代码逻辑）

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    /* 补充flex布局触发声明 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.container > img {
    /* 宽高铺满容器，由object-fit控制比例和裁剪规则 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

方案2：背景图实现（代码更简洁）

如果不需要保留img标签的DOM结构，直接用背景图实现逻辑更短：

<div class="container"></div>

.container {
    width: 200px;
    height: 200px;
    background: url(https://storage.googleapis.com/frese-product-images/25.jpg) center/cover no-repeat;
}