在流体设计中将元素的宽度调整为其高度的百分比，反之亦然？ [复制]

Posted 2023-03-05

【中文标题】在流体设计中将元素的宽度调整为其高度的百分比，反之亦然？ [复制]

【英文标题】：Sizing width of an element as a percentage of its height or vice versa in a fluid design? [duplicate]

【发布时间】：2013-07-08 07:19:10

【问题描述】：

我正在做一个响应式设计，无论屏幕尺寸是多少，它都必须保持其元素的比例（高度与宽度），所以我不知道任何元素的像素大小，我可以工作仅以 % 为单位。

我可以将宽度或高度设置为浏览器大小的百分比，但我不知道如何设置其他属性值。

仅使用 CSS，让 JS 计算值不是一种选择。

【问题讨论】：

只是在我看来，如果您不想在移动设备的屏幕尺寸发生变化时更改布局并且想让相同的元素（例如在 %tage 中）缩小到窗口，您不认为用户对你屏幕的体验会很差？？

如果我找到了实现这项工作的方法，那么我可以使用媒体查询来调整其他一切以在移动设备上工作（比如甚至更改图像比例，使图像的比例从 16x9 更改为 4x3，或类似的东西）。实际上，我一开始就是在使用它来进行流畅的响应式设计。

因为在移动显示中，如果你尝试让“Fluid”之类的东西响应，那么屏幕空间会按比例缩小以适应移动，就像你提到的 16x9 到 4x3 等， .而媒体查询将使布局垂直成比例，保持您想要突出的那些元素的重要性，以实现较小的屏幕相关性。因此，使用媒体查询是一个更好的选择，而不是使其响应流畅。

我仍然不认为一种方法排除另一种方法，我希望能够 1.根据屏幕尺寸定义一些元素比例 2.使用媒体修改这些比例查询不同的屏幕尺寸以保持其可用性并在所有平台上提供一致的用户体验。

您提到的场景与Twitter Bootstrap 框架非常相似。它几乎可以完成您想要完成的工作。

【参考方案1】：

我去年遇到了这个问题，经过一些繁琐的研究后找到了一个模糊的解决方案。不幸的是，它涉及包装器 DIV。结构很简单——你有一个包含内容容器的父 DIV 和另一个设置比例的 DIV。您将“比例”DIV 的margin-top 设置为父级宽度的百分比...示例：

#parent 
    position: relative;

.proportions 
    margin-top: 75%; /* makes parent height to 75% of it's width (4:3)  */

.container  /* contents container with 100% width and height of #parent */
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;

http://jsfiddle.net/twpTU/

【讨论】：

嘿伙计，这实际上是一个非常酷的把戏！我在我的项目中使用它来避免较新的 CSS 功能，但我使用单个包装器、伪元素和子元素来实现它。

【参考方案2】：

使用 CSS calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc 它在现代浏览器 http://caniuse.com/calc 中得到了很好的采用，作为后备使用 CSS 媒体查询并有最小宽度和高度可供使用。

显然，您总是可以提前计算这两个百分比。

Div1 需要 60% 的高度，宽度需要是高度的 1/4。 60% * .25 = 宽度：15%

div 
    position: absolute;
    border: 2px solid black

#div1 
    width: 40%;
    height: calc(40% * 1.2);

#div2 
    width: calc(90% / 4);
    height: 90%;

http://jsfiddle.net/pU4QA/

【讨论】：

请注意，大多数移动设备不支持calc()。 caniuse.com/#search=calc。此外，带有width: 50%; height: 50% 的元素不是正方形的，除非它的父元素也是：cssdeck.com/labs/qk8eaimr

【参考方案3】：

首先，我知道 OP 已经明确提到他不是在寻找任何 javascript 方法，但是我认为这对于仍然愿意使用 Javascript 的几个人来说可能很有用。

这就是答案；要将width 和height 的大小设置为相同的百分比，您可以通过CSS 将parent 元素的width 设置为width: 100%;，然后使用Javascript 设置@父级的 987654326@ 到 width 的大小。然后你会有一个方形元素作为父元素。

现在您可以将width: 10%; height: 10%; 应用到 child 元素。然后，为了保持响应，您需要做的只是监听window resize 事件，然后再次仅将height应用于父级，所有子级都将更新.

http://jsfiddle.net/sDzHb/

这样的事情会让它响应浏览器的大小：

$(window)
    .resize(function() 
        var w = $(document).width();
        $('.parent').height(w);
    )
    .trigger( 'resize' );