CSS Flexbox中图片无法正常缩放的问题求助

你的代码存在几个关键问题： #

• 选择器不匹配：CSS里的.img类没加到HTML的<img>标签上，.container选择器也对应不上HTML里的flex-container类
• HTML语法错误：<div class="row">的闭合标签多了个引号（写成了"</div>），还有多余的空div
• Flex容器未正确配置：flex-container类没加display: flex，反而给容器加了只对替换元素（比如img）生效的object-fit属性
• 图片父元素无尺寸约束：图片所在的.row容器没设置尺寸，导致图片的max-width/max-height找不到参照基准

修复后的完整代码： #

HTML部分：

</head>
<body>
  <div class="flex-container">
    <div class="row">
      <img class="img" src="images/1706810157558.jpg">
    </div>
  </div>
</body>

CSS部分：

/* 目标图片样式，绑定到对应的类 */
.img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片比例不变形 */
}

/* 正确开启Flex布局的容器 */
.flex-container {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center; /* 可选：垂直居中头像 */
  justify-content: center; /* 可选：水平居中头像 */
}

/* 给图片设置约束容器，控制头像最终大小 */
.row {
  width: 150px; /* 这里改成你想要的头像尺寸 */
  height: 150px;
  border-radius: 50%; /* 可选：把头像改成圆形 */
  overflow: hidden; /* 配合object-fit裁剪超出部分 */
}

关键调整说明： #

1. 给<img>添加.img类，让CSS能正确选中目标元素
2. 给flex-container加上display: flex，真正启用Flex布局
3. 通过.row容器设置头像的固定尺寸，图片的100%尺寸会基于这个容器缩放，实现缩小头像的需求
4. 如果需要圆形头像，加上border-radius:50%和overflow:hidden即可

内容的提问来源于stack exchange，提问作者Raiven Warren