Html 在React中用img填充div

我试图用img填充div（下面屏幕中的黑色区域）。

但是图像的规模不应该改变。 当div的大小根据浏览器的大小而改变时，应该通过相应地调整宽度或高度来显示图像。 图像是动态变化的，所以我永远不知道它是高还是长。 例如

最后，目标是在不改变图像比例的情况下使图像显示得尽可能大

下面是我开发的代码

<div className="asset__item">
  <a className="asset__img">                    
    <img
      alt="item image"
      src="/img/1.jpg"                        
    />                    
  </a>                  
</div>

请让我知道如何修理它

我尽量不修改资产项目的样式。

---

但是可以在那里添加一个div。

您可以尝试使用object fit： `

---

`

这是否回答了您的问题？谢谢，但这样比容器小的图像不会增加大小。

.asset__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px 20px 20px 20px;
  width: 100%;
  border-radius: 16px;
  margin-top: 20px;
  background: #202020;
}
.asset__item img {
  width: auto;
  max-width: 100%;
}

img{
   width: auto;
   max-width: 100%;
   object-fit:cover;
}