Как подогнать масштаб трансформации под размер браузера?

Question

Я использую скроллр для создания анимационных эффектов прокрутки. Моя проблема в моей странице, есть горизонтальная полоса прокрутки внизу. Мои выводы таковы из-за моего перевода: scale (). Это создает запас.

Вот мой пример вывода

Как вы можете видеть, моя страница не помещается в браузере из-за масштаба, может быть.

Вот мой пример кода:

<div class="rows">
    <div class="col-md-6 left_detail_field" data-1600="opacity: 0; transform:scale(0);" data-2000="opacity: 1; transform: scale(1)">
        <h1 class="text-left">SERVICES</h1>

        <p>We promote qualitative transformations of the system trustee business (hardware, software, and infrastructure), and we provide independent system services in processor peripheral field.</p>

        <a href="#" class="pull-right link-btn">VIEW DETAILS > </a>
        <div class="clearfix"></div>
    </div>
    <div class="col-md-6 right_kanji_field">
        <img src="images/line-2-kanji.png" class="img-responsive" data-1800="opacity: 0; transform: scale(2);" data-1900="opacity: 1; transform: scale(1);"  /> <!-- this is the scale that creates the margin gap -->
    </div>
</div>

Тогда это изображение, которое имеет масштаб

<img src="images/line-2-kanji.png" class="img-responsive" data-1800="opacity: 0; transform: scale(2);" data-1900="opacity: 1; transform: scale(1);"  /> 

Вы можете мне помочь?

Answer 1

Вы должны использовать JQuery изменения размера и изменить масштаб преобразования в соответствии с изменением размера окна. Пример:

$(window).on('load', function(){  
    var win = $(this); 
    if (win.width() < 769) { 
        $(element).css('transform','scale(0.2)');
    } 
}