Decreasing font size dynamically in relative containers

So we have a slider .outer which scales height by the width of viewport and example slide li .inner, what has some text in it. Now when we decrease the window width the slide li .inner will not fit in the .outer, thus parts of text getting hidden.

What I wanted to do was to add a font-size: x% to slide .inner whenever window is resized and .inners height is greater than .outer. So by 5% for example it would go down by intervals 95%, 90% 85% until .inner slide would smaller height than slider .outer .

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);
});

I was hoping somehow using for loop to decrease font-size percent on resize but im not sure even if can be done like this.

---

    $(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);
    });

链接地址: http://www.djcxy.com/p/87510.html

上一篇: 香草JS：调整字体

下一篇: 在相对容器中动态减小字体大小