如何使一个简单的元素变小？

Question

我想制作一个说明cpu百分比的圆圈图。我搞定了

问题是这张图很大，我似乎无法让它变小。

有没有办法用css做到这一点？如果有帮助我正在使用bootstrap

工作JSFIDDLE

https://jsfiddle.net/9dajqcr1/2975/

    $( document ).ready(function() { // 6,32 5,38 2,34
        $("#test-circle").circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 2,
            backgroundBorderWidth: 2,
            percent: 38,
            textSize: 1,
            textStyle: 'font-size: 1px;',
            textColor: '#666',
            multiPercentage: 1,
            percentages: [10, 20, 30]
        });
    });

<section class="container">

    <h3>Circliful</h3>

    <div class="row">
        <div class="col-lg-2">
            <div id="test-circle"></div>
        </div>
    </div>
</section>

Answer 1

您可以为图表的容器div指定高度或宽度。试试这段代码。

#test-circle {
  width: 150px;
}

Answer 2

也许要处理不同屏幕上的大小调整，你可以使用它：

#test-circle {
  min-width: 100px;
  width: 20%;
}

我更喜欢使用静态尺寸测量。