我有一个响应CSS网格画廊，和veritical图像弄乱了我的布局，他们出现在全尺寸.我希望他们保持方形，作为其他的.我怎么做呢？谢谢！
下面是代码：

<div id="gallery">
    <a   href="001.jpg"><img class="image" src="001.jpg"  ></a>
  <a   href="002.jpg"><img class="image" src="002.jpg"  ></a>
  <a   href="003.jpg"><img class="image" src="003.jpg"  ></a>
 <a   href="004.jpg"><img class="image" src="004.jpg"  ></a>

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  margin: 0px 30px;
  top: 0px;
  height: 100%;
  align-items: stretch;
}
.image {
  display: block;
  width: 100%;
  margin: 0px;
 
  
}

我希望它们和其他的一样保持正方形。我怎么做呢？谢谢！