调整子 DIV 的大小等于父 DIV答案

【问题标题】：Resizing child DIV equal to parent DIV调整子 DIV 的大小等于父 DIV
【发布时间】：2013-10-19 20:35:41
【问题描述】：

我有一个宽度为 400 像素、高度为 200 像素的 DIV。在这个 div 里面是另一个 div，在 50,50 位置有一些文本，字体大小为 14px;

当父 DIV 调整大小（例如调整为 600px x 300px）时，我希望子 DIV 内的文本大小也调整大小（调整为更大的字体大小），等于调整大小的父 DIV。

我如何使用 jQuery 和 HTML 做到这一点？

【问题讨论】：

similar situation here
你的标题和你的问题不太匹配。
How to resize font-size proportionally to div size的可能重复

标签： javascript jquery html css

【解决方案1】：

使子div的宽度和高度为100%

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

【讨论】：

【解决方案2】：

例如，当父级潜水尺寸从 (400 / 200) 变为 (600 / 300) 时，您应该像这样对子 div 应用 javascript 函数

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 看起来很棘手，但却是简单的代数。希望对你有帮助

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

jquery 有一个扩展，它允许在元素上触发调整大小，就像在窗口本身上一样。

分机号：Jquery Resize Plugin

所以这样的事情就可以解决问题：

$("#parent").resize(function(){
    var newFontSize = $("#parent").height() * 0.07 
    $("#child").css("font-size",newFontSize +"px");
});

查看这个 JsFiddle 示例：http://jsfiddle.net/Mm3jr/1/

【讨论】：