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

2018-07-01 09:05:26

所以我们有一个slider.outer，它通过视口的宽度和示例幻灯片的宽度来缩放高度.inner，其中有一些文本。现在，当我们减小窗口宽度时，幻灯片.inner将不适合.outer，因此部分文本隐藏。

我想要做的是添加一个字体大小：x％来滑动.inner，每当窗口调整大小和.inners高度大于.outer。因此，以5％为例，它将以95％，90％，85％的间隔下降，直到内部滑动比滑动外部更小。

不成功的例子：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循环来减小调整大小的字体大小的百分比，但我不确定即使可以这样做。

    $(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/87509.html

上一篇: Decreasing font size dynamically in relative containers

下一篇: Responsive font sizing in HTML with consistent soft wraps