将子 DIV 的大小调整为等于父 DIV

Resizing child DIV equal to parent DIV

本文关键字：DIV 于父 调整 将子      更新时间：2023-09-26

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

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

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

使子div宽度和高度为100%

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

例如，当父潜水大小从(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);

}

看起来很棘手，但是简单的代数。我希望你能帮助你

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

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

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

扩展：Jquery调整大小插件

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

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

看看这个JsFiddle的例子：http://jsfiddle.net/Mm3jr/1/

相关文章：