CSS图像不会垂直扩展

Question

在我的CSS属性中，我将grid-auto-rows设置为200px，因此图像仅在水平方向扩展。

我想使用属性overflow: hidden和object-fit来裁剪图像，并在窗口大小水平和垂直扩展时显示隐藏的部分。

但是，我无法使图像垂直扩展。我想设置200px的最小行，然后在其后扩展。

有人有解决这个问题的想法吗？谢谢。 我的画廊里总共有五张照片。

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 7.5px;
}

.gallery-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery-item .image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  cursor: pointer;
  transition: 0.5s linear;
  position: relative;
}

<div className="container">
  <div className="gallery-container">
    <div className="gallery-item">
      <div className="image">
        <img src="http://placekitten.com/g/200/200" />
      </div>
    </div>
  </div>
</div>