Question

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

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

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

Answer 1

让孩子的div宽度和高度为100％

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

Answer 2

例如，当父母潜水大小从（400/200）开始变为（600/300）时，您应该将javascript函数应用于子div，如此

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);


}

似乎很棘手，但却是简单的代数。我希望这些人会帮助你

Answer 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');  
});

Answer 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/

调整子DIV的大小等于父DIV

4 个答案: