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

Posted 2023-03-06

【中文标题】不同尺寸的流体宽度元素的正确纵横比

【英文标题】：Correct aspect ratio on fluid width elements of different sizes

【发布时间】：2015-02-06 00:06:51

【问题描述】：

我有以下响应模式：

DEMO

在演示中，所有块都具有相同的高度，但宽度可以是 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
  

【问题讨论】：

我感觉您可能需要更改您的设计才能使其正常工作。您是否尝试过增加使用的小数位数（参见：***.com/questions/7672473/…）？

是的，我尝试将百分比设置为小数点后 10 位，然后只有一位。我两种情况下布局中断，仅在不同的分辨率下。

【参考方案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

【讨论】：

谢谢，即使我将断点上的容器宽度更改为 33.33% 和 66.66% 并且我已经在里面有绝对定位元素以获取内容，这仍然有效。我认为将流体宽度与固定宽度填充混合会导致浏览器出现问题。

是的，浏览器通常不喜欢这样。很高兴它解决了你的问题:)