Как предотвратить изменение размера DIV при уменьшении масштаба страницы?

Question

У меня есть сетка из шести DIV с фоновыми изображениями. При уменьшении один DIV сжимается по вертикали пропорционально тому, насколько уменьшен браузер. Этот же DIV поддерживает правильные пропорции при увеличении.

Я попытался установить минимальную / максимальную высоту и позиционирование. Я обнаружил, что изменение родительского контейнера для отображения: inline-block сохраняет все пропорционально, но уменьшает воспринимаемый размер и смещает все, что не кажется идеальным решением.

Как ни странно, идентичные элементы с обеих сторон не имеют этой проблемы.

Вы можете наблюдать явление здесь .

<div id="element" class="collection-product">

  <div class="collection-box-2 card-shadow">
    <a href="/collections/haus-in-a-box/products/the-ful-kit-kitchen-utilities" class="grid_image_wrapper grid__image ">

      <img class="lazyload grid_image_absolute"
            src="//cdn.shopify.com/s/files/1/0003/7204/7924/products/Copy_of_Li_Sylvie_Fulhaus_Room204_04_300x.jpg?v=1550866417"
            data-parent-fit="cover"
            data-src="//cdn.shopify.com/s/files/1/0003/7204/7924/products/Copy_of_Li_Sylvie_Fulhaus_Room204_04_{width}x.jpg?v=1550866417"
            data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
            data-aspectratio="1.0"
            data-sizes="auto"
            alt="the fül-kit (kitchen + utilities)" >
    </a>
    <div class="product-overlay">
      <a href="/collections/haus-in-a-box/products/the-ful-kit-kitchen-utilities" class="product-grid-card-wrapper"> </a>
      <div class="product-grid-card-link">
      <a href="/collections/haus-in-a-box/products/the-ful-kit-kitchen-utilities">
         <p class="h2 product-title">
          the fül-kit (kitchen + utilities)
        </p>


        <p class="h2 product-price"><span class="Bold-theme-hook-DO-NOT-DELETE bold_product_price" data-override-value-set="1" data-override-value="74700" style="display:none !important;"></span><span class=money>$747.00</span></p>

      </a>



      </div>
    </div>

  </div>
  <div class="large--hide medium-down--show card-shadow mobile-square-title mobile-collection-margin-2"><a href="/collections/haus-in-a-box/products/the-ful-kit-kitchen-utilities" class="product-grid-card-link">
  <div class="mobile-price-container">
    <p class="h2 product-title">
      <a href="/collections/haus-in-a-box/products/the-ful-kit-kitchen-utilities">the fül-kit (kitchen +...</a>
    </p>


    <p class="h3 product-price">

      <span class="Bold-theme-hook-DO-NOT-DELETE bold_product_price_3" data-override-value-set="1" data-override-value="74700" style="display:none !important;"></span><span class=money>$747</span>

    </p>



  </div>
</a>
</div>
</div>