javascript - 在相关容器中动态减小字体大小

Question

所以我们有一个 slider .outer，它根据视口(viewport)的宽度和示例幻灯片 li .inner 来缩放高度，里面有一些文本。现在，当我们减小窗口宽度时，幻灯片 li .inner 将无法容纳在 .outer 中，因此部分文本会被隐藏。

我想做的是添加一个 font-size: x% 以在调整窗口大小且 .inners 高度大于 .outer 时滑动 .inner。因此，例如 5% 它将以 95%、90% 85% 的间隔下降，直到 .inner slide 的高度小于 slider .outer 。

无效示例: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);
    });