Есть ли способ использовать transform: scale () динамически - PullRequest
Новая
       28

Есть ли способ использовать transform: scale () динамически

0 голосов
/ 01 июля 2019

Я делаю сайт с обратным отсчетом FlipClock.По умолчанию он слишком маленький.Его нужно масштабировать с помощью transform: scale () или zoom, изменение свойства width и height только увеличивает количество белого вокруг обратного отсчета.На экране, отличном от 1920 * 1080, часы имеют неправильный размер.

Я пробовал некоторые скейлеры JS, однако они используют размер в пикселях для масштабирования, поэтому он не работает.Я также попробовал простое окно просмотра.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="clock" style="margin:2em; transform: scale(2.5);"></div>
<script type="text/javascript">
    var clock;
    $(document).ready(function() {
        var currentDate = new Date();
        var futureDate  = new Date("Dec 24, 2019 00:00:00");
        var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
        // Instantiate a coutdown FlipClock
        clock = $('.clock').FlipClock(diff, {
            clockFace: 'DailyCounter',
            countdown: true,
        });
    });
</script>
...