Kind Element Schriftgröße dynamisch nach Elternhöhe anpassen

Question

Ich versuche den folgenden Code, aber es funktioniert nicht. Logischerweise sollte es in Ordnung sein, aber kann mir jemand sagen, was ich hier vermisse? Das Ziel ist, die Schriftgröße des (h1) -Tags sollte sich automatisch an die Höhe des übergeordneten Elements anpassen.

Code Pen Link

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

Okay, los gehts. Dies sollte das sein, wonach Sie suchen. Lass es mich wissen, wenn es nicht für dich funktioniert!

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