css - 不同尺寸的流体宽度元素的正确纵横比

Question

我有以下响应模式:

DEMO

在演示中，所有 block 都具有相同的高度，但宽度可以是 25% 或 50%(它会在较低分辨率下发生变化，但与本例无关)。由于宽度是可变的，为了保持纵横比，我使用 padding hack 。我的问题是为双宽度元素设置正确的填充大小。

为了计算常规元素的填充，我使用公式 x/y 中的百分比，其中 x 是高度，y 是基于设计模型的宽度。

要计算双倍大小元素的百分比，我使用公式 x/(2*y + 2*z)，其中 z 是元素之间装订线的大小(演示示例中为 6px)。

这段代码似乎工作正常，直到我开始调整窗口大小，并且在某些点上布局中断，因为正常和双倍大小的元素具有不同的高度。我怀疑发生这种情况是因为浏览器计算百分比值的方式。所以我的问题是:是否可以调整我的代码中的计算，以始终获得正确的纵横比，而不管元素宽度如何？

相关代码:

HTML

<ul class="u-cf">
  <li class="double"></li>
  <li></li>
  <li></li>
  <li class="double"></li>
  <li></li>
  <li></li>
</ul>

CSS(Sass)

ul {
  margin: 0;
  padding: 6px;
  list-style: none;
  clear: both;
}

li {
  position: relative;
  padding: 6px;
  width: 25%;
  float: left;
  &:before {
    content: "";
    padding-top: percentage(280/405);
    display: block;
    height: 0;
  }
}

.double { 
  width: 50%; 
  &:before {
    padding-top: percentage(280/822); // 2*405px + 2*6px
  }
}

Answer 1

好吧，我必须调整标记，但使用内部的跨度使其正常工作。 对于边距，我使用了 calc 函数。

<ul class="u-cf">
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

在这里查看笔: http://codepen.io/bekreatief/pen/MYKBgE?editors=110