Question

所以我们有一个滑块.outer，它根据视口的宽度来缩放高度，例如幻灯片li .inner，里面有一些文字。现在当我们减小窗口宽度时，幻灯片li .inner将不适合.outer，因此部分文本被隐藏。

我想要做的是每当调整窗口大小并且.inners height大于.outer时，向slide .inner添加font-size：x％。因此，以5％为例，它会间隔95％，90％85％，直到.inner slide会比滑块更小。

unworking example：https://codepen.io/rKaiser/pen/JOQQWY?editors=1111

$(window).on('load resize',function() {
  var inn = $('.inner');
  var inner = $('.inner').outerHeight();
  var outer = $('.outer').outerHeight();
  if (inner > outer) {
      var i;
      for (i = 100; i > 50;i--){
      inn.css('font-size', i+'%' )
      i--;
      }
 }
console.log('outer ' + outer);
console.log('inner ' + inner);
});

我希望以某种方式使用for循环来减小调整大小的字体大小百分比，但我不确定即使可以这样做。

Answer 1

    $(window).on("load resize", function() {
      var inn = $(".inner");
      var inner = $(".inner").outerHeight();
      var outer = $(".outer").outerHeight();
      if (inner<outer) {
        //while (inner > outer) {
        var i;
        for (i = 100; i > 50; i--) {
          $(".inner").css("font-size",i+'%');
          i--;
        }
      }
      // }
      //inn.css('font-size', '70%');

      console.log("outer " + outer);
      console.log("inner " + inner);
    });

在相对容器中动态减小字体大小

1 个答案: