根据宽度设置 div 高度（反之亦然）

Question

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

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

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

问题是因为我将我的 width/height 设置为父级 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;

根据宽度设置 div 高度（反之亦然）

Set a div height from its width (and vice versa)

html

css

twig