Question

我正在制作响应式滑块，但在某些分辨率下，我的文本不适合我的幻灯片。

在这种情况下，我想减小字体大小，但我希望仅在必要时减小字体大小。

我已经编写了以下代码，但该页面永远加载着……您是否知道问题出在哪里？

谢谢（目标是使.desktop-slider-container的高度始终小于

 $('.desktop-slider-item').each(function(){
        var img = $(this).children('.desktop-slider-img');
        var cont = $(this).find('.desktop-slider-container');
        var mult = 1;
        if(cont.height() > img.height()){
            while(cont.height() > img.height() - 50){
                mult = mult - 0.05
                cont.find('.desktop-slider-name').css('font-size',toString(4*mult)+'rem');
                cont.find('.desktop-slider-role').css('font-size',toString(1.25*mult)+'rem');
                cont.find('.desktop-slider-name').css('font-size',toString(1*mult)+'rem');
            }
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desktop-slider-item">
    <div class="desktop-slider-body">
        <div class="desktop-slider-container">
            <h2 class="desktop-slider-name">
                <span>SomeText</span>
                <span>Some Text</span>
            </h2>
            <div class="desktop-slider-role">Some Text</div>
                <a href="sometext" class="desktop-slider-link">Some text
                    <span class="right_arrow" style="background-image:url('../images/next_arrow.png');"> </span>
                </a>
        </div>
    </div>
        <div class="desktop-slider-img">
            <img src="sometext" alt="">
            <div class="desktop-slider-date">
                <span class="day">09</span>
                <span class="mounth">avril</span>
                <span class="year">2019</span>
            </div>
        </div>
    </div>
</div>

用jQuery无限加载

0 个答案: