Css 具有组件的背景大小

我现在有一个非常简单的组件，它负责在屏幕上渲染图片。图片大小不尽相同，所以我创建了一个100%宽、300px高的容器。我希望图像能够在不被拉伸的情况下适合。如果您使用CSS的背景大小属性并将图像加载到CSS中，则非常容易。但我从React组件渲染图像时有点像这样：

export default function Theme({theme}) {
    return (
        <div className='themeContainer'>   
             <img  className="headerImage" src={theme.headerImg} />
        </div>
    )
}

在这种特殊情况下，我无法使用背景大小对图片进行处理。

resizeMode={''}

我认为这会起作用。：）

.themeContainer {
  margin : 3em 0 0 0 ;
  padding : 10px;
  width : 100%;
  height: 300px;
}
.themeContainer .headerImage{
  background-size: cover;
  
}