Resizing child DIV equal to parent DIV

2018-07-01 09:02:19

I have a DIV with width 400px and height 200px. Inside this div is another div with some text at position 50,50 and font-size 14px;

When the parent DIV resizes (for example to 600px x 300px), i want that the text-size inside the child DIV resizes too (to a larger font-size), equal to the resized parent DIV.

How can i do that with jQuery and HTML?

使子div的宽度和高度100％

childDiv {
 display:block;
 width: 100%;
 height: 100%;
 position:relative //so you dont lose the positioning of your text
}

when the parent dives size becomes (600 / 300) from (400 / 200) for example, you should apply a javascript function to the child div like so

function resizeFont(parentElementId, childElementId, newWidth) {

    currWidthParentElement = parseFloat( $(parentElementId).width() ); // get current width
    currChildFontSize = parseInt( $(childElementId).css('font-size') ); // get font size for child   

    percentaRaise = (newWidth - ceil(currWidthParentElement)) * (100/ceil(currWidthParentElement)); // calculate how much parent increase

    // calculate and apply new font size
    newFontSize = currChildFontSize * percentaRaise/100 + currChildFontSize;

    $(childElementId).css(newFontSize);


}

is seems tricky but is simple algebra. I hope thihs will help you

http://codepen.io/rafaelcastrocouto/pen/EiFIL

var div = $('div');
$(window).on('resize', function(){  
  var u = div.width() / 200;
  div.css('font-size', u +'em');  
});

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

上一篇: 字母间距和字体大小以限制字符数量

下一篇: 调整子DIV的大小等于父DIV