添加hover的scale属性后border-radius失效问题求助

你遇到的问题是因为图片的border-radius和border设置在<img>元素本身，当使用transform: scale(1.05)放大图片时，图片（包括边框）会超出父容器img-wrapper的范围，而父容器没有设置border-radius，导致原本的圆角被父容器的直角裁剪，视觉上看起来像是圆角消失了。同时，transform缩放会让图片的边框也跟着放大，进一步加剧了圆角的变形问题。

把border和border-radius从<img>元素移到父容器img-wrapper上，保持img-wrapper的overflow: hidden属性，这样即使图片放大，也会被父容器的圆角边框裁剪，视觉效果保持一致。

修改后的CSS代码如下：

.card-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  width: 250px;
}

.img-wrapper {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  /* 将边框和圆角移到父容器 */
  border: 1px solid black;
  border-radius: 0.75rem;
}

.img-wrapper img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 移除图片自身的边框和圆角 */
}

.card-container:hover .img-wrapper img {
  transform: scale(1.05);
}

.text-wrapper {
  border: 2px solid green;
}

• 父容器img-wrapper设置了边框和圆角，同时overflow: hidden，当图片放大超出容器范围时，会被容器的圆角边缘裁剪，保证视觉上始终是圆角效果。
• 图片本身不再有边框和圆角，缩放时只会放大图片内容，不会影响容器的边框样式。

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