缩小页面时如何防止DIV调整大小？

Question

我有六个带背景图像的DIV网格。缩小时，一个DIV与浏览器的缩小比例成比例地垂直缩小。放大时，相同的DIV会保持适当的比例。

我尝试设置最小/最大高度和位置。我发现将父容器更改为显示：inline-block可以使所有内容保持比例，但是会缩小感知的大小并移动所有内容，这似乎不是理想的解决方案。

奇怪的是，它两侧的相同元素都没有此问题。

您可以观察到现象here。

<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>