如何确保border-radius作用于图片本身而非img标签容器？

• 你给<img>设置了padding: 10px，图片显示区域和容器边框之间存在10px内边距，容器的圆角仅作用于外层边框，不会裁剪内部的图片内容
• object-fit: contain会让图片等比缩放后完整展示在容器内，不会铺满整个容器，即便去掉padding，图片和容器边缘也可能存在空隙，容器圆角无法作用到图片本身

根据你是否需要保留图片周围的10px留白，选择对应方案即可：

方案1：需要保留10px留白（推荐） #

给图片套一层父容器，将padding、border-radius属性转移到父容器，同时给父容器添加overflow: hidden裁剪溢出内容，调整后的代码如下：
HTML代码：

<div class="img-wrapper">
  <img src={main_content.img} alt="" className="image" />
</div>

CSS代码：

/* 父容器样式 */
.img-wrapper {
  max-width: 100%;
  min-height: 300px;
  max-height: 70vh;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
  /* 可按需添加父容器背景色 */
}
/* 图片样式 */
.image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

方案2：不需要保留10px留白 #

直接修改原有图片样式，删除padding属性即可。如果接受图片裁切以铺满容器，可将object-fit: contain改为object-fit: cover，圆角会直接作用于图片边缘：

.image {
  max-width: 100%;
  min-height: 300px;
  max-height: 70vh;
  object-fit: contain; /* 需铺满容器可改为cover */
  border-radius: 10px;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture