我们可以在 CSS 中动态定义框的宽度吗？

Question

在 django 项目中，我们在 views.py 文件中提供一些上下文数据，然后我们使用 jinja 模板 {{...}} 在 html 文件中访问它。但我需要将该数据用作框宽度的像素大小。

我也是 Whosebug 的新手，所以我不知道如何 post views.py 编码。所以就写到这里了。

##这是我的views.py代码##

from django.shortcuts import render

def home(request):

    px_size = 400

    return render(request, 'index.html', {'px_size':px_size})

##views.py代码到此结束##

这是我的 index.html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            background-color: rgb(140, 132, 166);
            width: 400px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>I need to set this box's width as {{px_size}} px, dynamically</p>
    Here in body of html we can take px size from views as context. 
    <br>
    But I want to use this px_size to be the px size of width in css.
    <br>
    I have mentioned statically in style tag width as 400px.
    <br>
    How can I take it dynamically from the context?
</body>
</html>

提前致谢。

Answer 1

尝试使用 aspect-ratio 属性。这根据给定值的比率动态缩放。

因此，例如，如果您想使用 1/1 比率，并假设已定义 px_size，请尝试

        p{
            background-color: rgb(140, 132, 166);
            aspect-ratio: 1 / 1;
            width: {{px_size}};
            font-size: 30px;
        }

Answer 2

<p style="width:{{px_size}}px"></p>

我们可以在 CSS 中动态定义框的宽度吗？

Can we define width of a box in CSS dynamically?

html

css

python

django-views