设置width属性后img标签的border-radius失效问题求助

大家好，我最近在做一个图片模块，需求是让div里的图片带有圆角，并且图片要完全包含在这个div里，不能超出范围。

我自己写了一段实现代码：

.img-module {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 70vh;
  grid-column: 1/2;
  grid-row: 1/2;
  border-radius: 1.5rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: contain;
  border-radius: 1.5rem;
}

<div className='img-module'>
  <img src="http://placekitten.com/200/300" alt="" />
</div>

现在遇到了一个奇怪的问题：

• 不给img设置width:100%的时候，圆角显示正常，但宽图会直接超出div的范围，没办法适配；
• 加上width:100%后，宽图确实能正常适配div了，可图片的圆角却莫名其妙失效了，变成了默认的直角。

我还分别截了几种情况的图：

• 高图（设置width属性）：[高图开启width效果](Picture link)
• 高图（不设置width属性）：[高图关闭width效果](Picture link)
• 宽图（设置width属性）：[宽图开启width效果](Picture link)
• 宽图（不设置width属性）：[宽图关闭width效果](Picture link)

我试着谷歌过相关问题，但没找到有效的解决办法，有没有大佬能帮我看看怎么修复这个问题呀？

备注：内容来源于stack exchange，提问作者AlexCap