如何防止图像在CSS的Grid Layout上放大/缩小时移动和拉伸？

问题描述

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

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

我当前的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>

这是我的CSS

  .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;
  }

使用此方法，图像可以拉伸，但是我设法通过将图库图像中的宽度和高度设置为自动来固定拉伸。但是，当我像这样放大图像时，这会移动图像元素：

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

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html liquid