如何让图片适配div容器宽度？CSS object-fit设置无效解决方案

图片无法铺满容器全宽是两处CSS写法错误导致的：

• 图片样式存在属性覆盖：先给img设置了width: 100%、height: 100%，后面又追加了width: auto、height: auto，后写的属性直接覆盖了前面的全宽设置，图片会按照原图尺寸自适应显示，自然不会撑满容器；同时使用的object-fit: contain属性作用是保持原图完整显示、自动预留空白边，本身就不会实现铺满效果。
• 父flex容器设置错误：.cardWrapper设置了align-items: center，flex布局下该属性会让所有子元素收缩到自身内容宽度，不会自动撑满容器横向空间；同时justify-content: center会让所有内容垂直居中挤在卡片中间，加上给img设置的height:100%会让图片占满整个卡片高度，直接把下方的标题、描述挤出可视区域。

现有JSX结构不需要改动，直接替换对应CSS代码即可，核心调整点都做了标注：

.cardWrapper {
  width: 165px;
  height: 192px;
  display: flex;
  flex-direction: column;
  /* 内容从顶部开始排列，取消整体垂直居中 */
  justify-content: flex-start;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 25%);
  margin: 0 auto;
  /* 移除align-items: center，让子元素默认撑满容器宽度 */
  overflow: hidden;
}

.cardWrapper img {
  width: 100%;
  /* 给图片设置固定高度，留出下方标题、描述的展示空间，数值可按需调整 */
  height: 120px;
  /* 替换contain，图片按比例铺满区域，裁剪多余部分、不会拉伸变形 */
  object-fit: cover;
  /* 清除行内元素默认的底部间隙 */
  display: block;
}

.cardWrapper h3 {
  font-size: 15px;
  text-align: center;
  /* 调整标题和图片的间距 */
  margin: 10px 0 0 0;
}

.description {
  font-size: 12px;
  color: #808080;
  margin-top: 12px;
  font-weight: 400;
  text-align: center;
}

调整后图片会完全撑满卡片全宽，无拉伸变形，标题和描述居中排列在图片下方，和预期的卡片样式一致。

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