从宽度设置div高度（反之亦然）[重复]

Question

我正在从事一个涉及创建不同标签的项目，这些标签具有不同的预定义格式。

有时标签的宽度优于其高度，反之亦然。

当宽度优越时，我想让 div 的宽度为父 div 的 90% 并相应地设置高度（通过保持相同的比例）。如果高度较高，反之亦然。

问题是因为我将宽度/高度设置为父 div 的百分比，我不知道如何保持比例。

我通过 twig 生成我的页面（我可以访问以毫米为单位的高度和宽度）。

这就是我现在正在做的事情。

{% if template.format.width >= template.format.height %}
    {% set templateWidth = 90 %}
    {% set templateHeight = (90/template.format.width)*template.format.height %}
{% else %}
    {% set templateWidth = (90/template.format.height)*template.format.width %}
    {% set templateHeight = 90 %}
{% endif %}

我的 div 是这样设置的：

style="position:relative; width: {{ templateWidth }}%; height: {{ templateHeight }}%"

我知道这是行不通的，因为父 div 的高度和宽度不同。

Answer 1

您可以使用根变量：

/* Assuming that your ratio is 4/5 */
:root {
    --container-width: 90%;
    --container-height: calc(var(--container-width) * 4/5)
}

/* Now when you use these variables */
#template {
    width: var(--container-width);
    height: var(--container-height);
}

Answer 2

您可以使用CSS aspect-ratio 来保持比率。

width: {{ templateWidth }}%;
height: {{ templateHeight }}%;
aspect-ratio: {{ templateWidth }} / {{ templateHeight }};

然后您可以修复width 或height 并将另一个设置为自动，例如：

width: 100%;
height: auto;

或者反过来：

width: auto;
height: height;