Html 在CSS中，如何防止图像在网格布局放大/缩小时移动和拉伸？

我创建了一个网格布局模板，其中包含如下图像：

但是，当我放大和缩小时，图像在放大时沿其宽度延伸，在缩小时沿其长度延伸

我当前的html代码是：

<div class="container">
   <figure class="gallery__item gallery-item-1">
      <img src="url" class="gallery__img">
   </figure>
   <figure class="gallery__item gallery-item-2">
      <img src="url" class="gallery__img">
   </figure>
   <figure class="gallery__item gallery-item-3">
      <img src="url" class="gallery__img">
   </figure>
   <figure class="gallery__item gallery-item-4">
      <img src="url" class="gallery__img">
   </figure>

使用此选项，图像会拉伸，但我通过将“多媒体资料”图像中的宽度和高度设置为“自动”来修复拉伸。但是，当我放大图像时，这会移动图像元素，如下所示：

如何保持网格布局，同时保持图像的纵横比，而不在放大或缩小时拉伸图像？我也有一些限制。我不能使用像Bootstrap这样的库，因为我在Shopify中使用它会导致一些冲突

---

谢谢大家!

你试过设置最大高度和最大宽度吗？我应该把它们添加到父类中吗？还是个人形象课？

  .gallery__img {
      object-fit: fill;     
      width: 100%; 
      height: 100%;
  }
  .gallery__item--1 {
      grid-column-start: 1;
      grid-column-end: 6;
      grid-row-start: 1;
      grid-row-end: 12;
      margin-right: -35px;
      margin-top: -8px;
      overflow: hidden;
  }

  .gallery__item--2 {
      grid-column-start: 6;
      grid-column-end: 12;
      grid-row-start: 1;
      grid-row-end: 6;
      margin-right: -72px;
      margin-top: -8px;
      overflow: hidden;
  }

  .gallery__item--3 {
      grid-column-start: 6;
      grid-column-end: 9;
      grid-row-start: 6;
      grid-row-end: 12;
      margin-right: -55px;
      margin-top: -10px;
      overflow: hidden;
  }

  .gallery__item--4 {
      grid-column-start: 9;
      grid-column-end: 12;
      grid-row-start: 6;
      grid-row-end: 12;
      margin-left: 62px;
      margin-top: -10px;
      margin-right: -72px;
      overflow: hidden;
  }