如何在网格视图CSS中拉伸图像

如何将图像拉伸到网格单元中。更具体地说，我想删除快照照片中显示的左侧和右侧填充。 CSS代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 15px;
}
.container img {
  width: 250px;
  height: 250px;
  object-fit: fill;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition: all 100ms ease-out;
}
.container img:hover {
  transform: scale(1.04);
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

---

请添加一些html代码。如果可能的话，一段有效的代码片段将有助于回答这个问题。您是否也尝试过更改图像的

宽度

和

高度

100%

？是的，我尝试了宽度-高度100%，但没有成功。