我正在使用 skrollr创建滚动动画效果。 我的问题是在我的页面底部有一个水平滚动条。我发现这是因为我的 translate: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);" />
你能帮帮我吗?
最佳答案
您需要使用调整大小的 jquery 并根据窗口调整大小更改变换比例。示例:
$(window).on('load', function(){
var win = $(this);
if (win.width() < 769) {
$(element).css('transform','scale(0.2)');
}
}
关于css - 如何在浏览器大小中调整变换比例的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44015110/