如何使 <div> x 倍大？但不是线性变大，它必须停止

Question

好的，所以我在博客的侧边栏中有这个标签云：

<div id="tags" class="widget clearfix">

    <h4 class="highlight-me">Nuage de tags</h4>
    <div class="tagcloud ">
        {% for tag, occurence in tags %}
            <a style="zoom: {{ 1 + (occurence - 1) * 0.25  }}" href="#">{{ tag }}</a>
        {% endfor %}
    </div>

</div>

tags在数组中，标签的labels为key，出现次数在所有博客文章中作为值。目标是标记出现的次数越多，显示的越大（使用 zoom: CSS 内联声明）。

因此我得出的公式是：1 + (x - 1) * 0.25。这样，独特的标签有一个 1 缩放，两倍的标签是 1.25，三倍的标签是 1.50，1.75，等等。这个公式添加 0.25 以线性方式 CSS 缩放声明的值 .

只要没有在超过 3 或 4 篇文章中使用标签，这是可以接受的。但是当我的博客中有 50 多篇文章时，这将不再是可接受的。我不希望最受欢迎的标签占用太多space。例如，让标签显示 6.75 缩放，如果在 23 篇文章中使用这种情况是不可接受的。

使缩放不再线性增长的公式是什么？

谢谢！

Answer 1

我不知道你到底"allowed"要做什么。

但从数学上讲 this formula 似乎可以得到您想要的确切值：y = arctan(x/4) + 1 总是上升，越来越少上升，趋于无限，等等...

另请注意，如果无法使用适当的数学函数，您的问题（考虑到您的限制）可能没有解决方案。

如何使 <div> x 倍大？但不是线性变大，它必须停止

How to make <div> x times bigger? But not lineary bigger, it has to stop

html

css

math

zooming