Question

我正在尝试以下代码，但它无法正常工作。从逻辑上讲它应该没问题，但任何人都可以告诉我这里缺少什么吗？目标是，（h1）标签的字体大小应根据其父级的高度自动调整。

HTML

<div class="product-title">
  <h1>Some Title which should not cross parent height and adjust font-size dynamically</h1>
</div>

CSS

.product-title{
     height: 200px;
     width: 200px;
 }

JS

    function adjustFontSize() {
        $('#h1').each(function() {
        var child = $(this);
        var parent = child.parent();

        child.css('font-size', '18'); //set max default font size
        while (child.height() > parent.height() && parseInt(child.css('font-size')) > 9) { //check div height condition
              child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px"); //decrease font size accordingly
        }
       });
      }

Answer 1

好的，你去吧。这应该是你正在寻找的。如果它不适合你，请告诉我！

$(window).load(function() {
  function adjustFontSize() {

    $('.product-title h1').each(function() {

      var child = $(this);
      var parent = child.parent();
      var fontSize = 3;
      child.css("font-size", fontSize + "em");
      while (child.height() > parent.height() && fontSize > .75) { //check div height condition
        fontSize -= .05;
        child.css('font-size', fontSize + "em"); //decrease font size accordingly
      }

    });

  }
  adjustFontSize();
});

子元素字体大小根据父级的高度动态调整

1 个答案: