如何正确实现图片覆盖网站卡片div，尺寸匹配卡片且圆角对齐

核心问题定位 #

1. 图片父容器.right-side未设置宽高，导致图片百分比宽高无参照，按页面尺寸缩放
2. 图片缺少object-fit: cover属性，无法等比填充容器
3. CSS属性拼写错误：greyscale应为标准写法grayscale，部分浏览器不兼容英式拼写
4. 卡片内边距挤压图片位置，导致圆角无法和卡片对齐

修正代码 #

CSS部分

/* 在原有CSS基础上新增.right-side样式 */
.right-side {
  width: 120px; /* 可根据左侧内容宽度调整，也可设为flex: 1占满剩余空间 */
  height: 100%;
  border-radius: 0 30px 30px 0;
  overflow: hidden; /* 直接裁剪超出容器的图片部分 */
}

/* 修改原有.card-img样式 */
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比裁剪填充，不变形 */
  object-position: center;
  /* 移除单独设置的border-radius，父级已经处理溢出裁剪 */
  border-radius: 0;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
  transition: all 0.5s ease;
}

/* 修改hover样式的拼写错误 */
.card-img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

全卡片背景图适配方案（可选）

如果需要图片覆盖整个卡片作为背景，文字悬浮在上方，修改如下：

.card {
  position: relative;
  overflow: hidden;
  /* 保留原有其他属性 */
}
.card .card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 30px;
}
.left-side {
  position: relative;
  z-index: 1;
}

HTML结构无需调整，直接生效。

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