Блог

Я создал шаблон макета сетки, содержащий изображения, подобные таким:

Однако, когда я увеличиваю и уменьшаю масштаб, изображения растягиваются по ширине при увеличении и растягиваются по длине при уменьшении масштаба.

Мой текущий 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;
  }

  

Используя это, изображения растягиваются, но мне удалось исправить растяжение, установив ширину и высоту в изображении галереи на auto. Тем не менее, это перемещает мой элемент изображения, когда я увеличиваю масштаб, вот так:

Как мне сохранить макет сетки при сохранении соотношения сторон изображения, не растягивая изображения при увеличении или уменьшении масштаба? У меня также есть некоторые ограничения. Я не могу использовать библиотеки, такие как Bootstrap, поскольку я использую его в Shopify, что вызовет некоторые конфликты.

Спасибо!