使用object-fit: contain时图片圆角失效的问题求助

我懂你碰到的这个坑——当给设置了object-fit: contain的<img>加border-radius时，圆角只会作用在图片元素的外层框上，根本不会裁剪图片内容的边角。这是因为contain会让图片保持原始比例，在img元素内部留出空白区域，圆角只切了元素的边框，没碰到底层的图片内容本身。

解决方案：借助父容器实现圆角裁剪 #

核心思路是把圆角和溢出隐藏的属性转移到图片的父容器上，让容器来负责裁剪图片内容，而不是直接给图片加圆角。具体操作如下：

• 给父容器<div>设置border-radius，定义你想要的圆角大小
• 给父容器加上overflow: hidden，这是关键——超出容器圆角的图片内容会被自动隐藏
• 保留<img>的object-fit: contain属性，确保图片完整显示且比例不失调

修改后的示例代码 #

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}
div {
  width: 100%;
  height: 100%;
  border-radius: 20%; /* 将圆角属性移到父容器 */
  overflow: hidden; /* 隐藏超出圆角范围的内容 */
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 移除img元素上的border-radius */
}

<div>
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
</div>

为什么这个方法能生效？ #

当父容器开启overflow: hidden后，容器内部的所有内容（包括你的图片）只要越过容器的圆角边界，都会被裁剪掉。而object-fit: contain保证了图片在容器内完整展示、比例不变，这样最终呈现出来的就是带圆角的完整图片了。

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