Как сделать простой элемент меньше?

Я хочу сделать круговой график, показывающий процент процессора. У меня это работает

Проблема в том, что этот график огромен, и я не могу его уменьшить.

Есть ли способ сделать это с помощью css? Я использую бутстрап, если это помогает

РАБОЧИЙ JSFIDDLE

    $( 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>

html css twitter-bootstrap

11.04.2018 16:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

240

Ответы 2

Вы можете назначить высоту или ширину контейнеру div для диаграммы. Попробуйте этот код.

#test-circle {
  width: 150px;
}

11.04.2018 16:46

Возможно, для обработки изменения размера на разных экранах вы могли бы использовать это:

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

Я предпочитаю это использовать больше, чем использовать статические меры размера.

11.04.2018 17:33

Другие вопросы по теме

Всплывающая подсказка Bootstrap 4 в проблеме с позиционированием небольшого контейнера

Наведите курсор мыши на событие на перекрывающихся CSS сетки объектов с окружающей пустыми ячейками

Toastr несколько div

Итерации по загруженным элементам HTML-файла JQuery

Как установить продолжительность отображения элементов один за другим

Как я могу переключить блок в нижнюю часть моей CSS-сетки?

Используйте одну и ту же анимацию для нескольких элементов

Как оптимизировать фоновое изображение по аналогии с тегом <picture>?

CSS-сетка не работает должным образом на мобильных устройствах

Флажки со значками Font Awesome 5

Как сделать простой элемент меньше?

Ответы 2

Другие вопросы по теме

Похожие вопросы