CSS 响应百分比高度

Question

我正在尝试制作一个 div 的网格，具有 position: absolute 的响应比例。

当演示的视口为1100px时（在下面的演示中单击Full Page可查看）<div><img></div>之间的垂直和水平间距相等。

但是，当视口宽度更改为 850px 及以下时，垂直间距增加的速度快于水平间距。

我根据 height: 875px; 的 % 高度计算了 #entn 的 top: % 值。但是，这不会随着视口宽度的减小而缩放。

感谢帮助。

    #enterprise-gallery {width: 1259px; height: 875px; max-width: 100%; position: relative; margin: auto;}
    #enterprise-gallery div {position: absolute;}
    #enterprise-gallery div img {border-radius: 26px; padding: 0; margin: 0;}
    @media (max-width: 1330px) {
        #enterprise-gallery {
            height: 875px; 
            width: 885px; 
            max-width: 100%;
        }
        #ent1 {width: 33.45% !important;}
        #ent2 {width: 38.31% !important; left: 36.05% !important;}
        #ent3 {width: 23.05% !important;}
        #ent4 {width: 42.82% !important; top: 24% !important;}
        #ent5 {width: 28.36% !important; left: 45.42% !important; top: 24% !important;}
        #ent6 {width: 38.98% !important; top: 48.5% !important;}
        #ent7 {width: 32.66% !important; left: 41.59% !important; top: 48.5% !important;}
        #ent8 {width: 23.05% !important; top: 39% !important;}
    }

    <div id="enterprise-gallery">
      <div style="width: 422px; left: 0; top: 0;" id="ent1"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-7.jpg" width="100%" height="auto" alt=""/></div>
      <div style="width: 483px; left: 454px; top: 0;" id="ent2"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-6.jpg" width="100%" height="auto" alt=""/></div>
      <div style="width: 290px; right: 0; top: 0;" id="ent3"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-8.jpg" width="100%" height="auto" alt=""/></div>
      <div style="width: 540px; left: 0; top: 296px" id="ent4"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-4.jpg" width="100%" height="auto" alt=""/></div>
      <div style="width: 358px; left: 576px; top: 296px;" id="ent5"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-2.jpg" width="100%" height="auto" alt=""/></div>
      <div style="width: 491px; left: 0; top: 591px;" id="ent6"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-3.jpg" width="100%" height="auto" alt=""/></div>
      <div style="width: 412px; left: 525px; top: 591px;" id="ent7"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-5-1.jpg" width="100%" height="auto" alt=""/></div>
      <div style="width: 288px; right: 0; top: 482px;" id="ent8"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-1.jpg" width="100%" height="auto" alt=""/></div>
    </div>

编辑

我已经尝试使用 CSS 网格和从 https://grid.layoutit.com/ 生成的以下代码，但还没有完全实现。

<style>
    #enterprise-gallery {
      width: 1259px;
      max-width: 90%;
      margin: auto;
      display: grid; 
      grid-template-columns: 33.45% 38.31% 23.05%; 
      grid-template-rows: 30.78% 30.78% 30.78%; 
      gap: 2.6% 2.6%; 
      grid-template-areas: 
        "a a b"
        "a a b"
        "c c b"
        "c c d"
        "e e d"
        "e e d";
    }
    #enterprise-gallery div img {border-radius: 26px;}
</style>
<div id="enterprise-gallery">
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-7.jpg" width="100%" height="auto" alt=""/></div>
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-6.jpg" width="100%" height="auto" alt=""/></div>
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-8.jpg" width="100%" height="auto" alt=""/></div>
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-4.jpg" width="100%" height="auto" alt=""/></div>
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-2.jpg" width="100%" height="auto" alt=""/></div>
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-3.jpg" width="100%" height="auto" alt=""/></div>
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-5-1.jpg" width="100%" height="auto" alt=""/></div>
  <div><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-1.jpg" width="100%" height="auto" alt=""/></div>
</div>

EDIT2

来自 Ghanshyam Patel 的代码完美地解决了平板电脑问题。

在移动设备上，我无法取消设置 top 数字，因此所有 #entn div 都堆叠在一起。

@media (max-width: 470px) {
  #enterprise-gallery {
    height: 300vh;
    width: calc(100vw - 60px);
    max-width: 100%;
  }
  #ent1 {
    width: 100% !important;
    top: unset !important;
  }
  #ent2 {
    width: 100% !important;
    left: 0 !important;
    top: unset !important;
  }
  #ent3 {
    width: 100% !important;
    top: unset !important;
  }
  #ent4 {
    width: 100% !important;
    top: unset !important;
  }
  #ent5 {
    width: 100% !important;
    left: 0 !important;
    top: unset !important;
  }
  #ent6 {
    width: 100% !important;
    top: unset !important;
  }
  #ent7 {
    width: 100% !important;
    left: 0 !important;
    top: unset !important;
  }
  #ent8 {
    width: 100% !important;
    top: unset !important;
  }
}

Answer 1

您可以使用网格 CSS，但在网格布局中，您可以合并行或列。所以你无法达到与你的方面相同的结果。

我已经为您添加了 CSS 解决方案。刚刚使用了“calc”CSS 函数。请检查。我认为这就是您所需要的。如有任何问题，请随时发表评论。

#enterprise-gallery {
  width: 1259px;
  height: 100vw;
  max-width: 100%;
  position: relative;
  margin: auto;
}

#enterprise-gallery div {
  position: absolute;
}

#enterprise-gallery div img {
  border-radius: 26px;
  padding: 0;
  margin: 0;
}

@media (max-width: 1330px) {
  #enterprise-gallery {
    height: calc(100vw - 100px);
    width: calc(100vw - 100px);
    max-width: 100%;
  }
  #ent1 {
    width: 33.45% !important;
  }
  #ent2 {
    width: 38.31% !important;
    left: 36.05% !important;
  }
  #ent3 {
    width: 23.05% !important;
  }
  #ent4 {
    width: 42.82% !important;
    top: 24% !important;
  }
  #ent5 {
    width: 28.36% !important;
    left: 45.42% !important;
    top: 24% !important;
  }
  #ent6 {
    width: 38.98% !important;
    top: 48.5% !important;
  }
  #ent7 {
    width: 32.66% !important;
    left: 41.59% !important;
    top: 48.5% !important;
  }
  #ent8 {
    width: 23.05% !important;
    top: 39% !important;
  }
}

<div id="enterprise-gallery">
  <div style="width: 422px; left: 0; top: 0;" id="ent1"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-7.jpg" width="100%" height="auto" alt="" /></div>
  <div style="width: 483px; left: 454px; top: 0;" id="ent2"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-6.jpg" width="100%" height="auto" alt="" /></div>
  <div style="width: 290px; right: 0; top: 0;" id="ent3"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-8.jpg" width="100%" height="auto" alt="" /></div>
  <div style="width: 540px; left: 0; top: 296px" id="ent4"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-4.jpg" width="100%" height="auto" alt="" /></div>
  <div style="width: 358px; left: 576px; top: 296px;" id="ent5"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-2.jpg" width="100%" height="auto" alt="" /></div>
  <div style="width: 491px; left: 0; top: 591px;" id="ent6"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-3.jpg" width="100%" height="auto" alt="" /></div>
  <div style="width: 412px; left: 525px; top: 591px;" id="ent7"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-5-1.jpg" width="100%" height="auto" alt="" /></div>
  <div style="width: 288px; right: 0; top: 482px;" id="ent8"><img src="https://mandoemedia.com/wp-content/uploads/2022/02/Mandoe-Enterprise-1.jpg" width="100%" height="auto" alt="" /></div>
</div>

CSS 响应百分比高度

CSS responsive % height

css

responsive-design