标签：elements children resizable javascript jquery

我已经搜寻此问题的答案1天了,但还未找到答案！

我想通过计算并比较其父级的大小来计算所有子级元素的大小,然后将其宽度和高度应用于每个子级,从而调整所有子级元素的大小.

我已经编写了一些代码行,但是这似乎没有按预期工作.孩子们的尺寸通过这种方式变得疯狂：

            $('.parentElement').resizable({
                resize: function(e, ui) {
                    var thisw = $(this).outerWidth();
                    var thish = $(this).outerHeight();

                      $(this).find("*").each(function(i, elm){
                        elw = $(elm).outerWidth();
                        elh = $(elm).outerHeight();
                        wr = parseFloat(elw) / parseFloat(thisw);
                        hr = parseFloat(elh) / parseFloat(thish);
                            w = elw * wr;
                            h = elh * hr;
                        $(elm).css({"width": w, "height": h});
                     });
                },

            });

也许有人可以帮助我更正上面的代码,以便调整子元素的大小顺利！

编辑：

这是fiddle demo.

您可以看到,通过上面的代码,孩子的尺寸变得疯狂了,而我希望他们平滑地调整尺寸以适合其父尺寸.

我知道我可以通过jquery或css按百分比设置children元素的宽度和高度,但是我不想那样做,因为文本的大小不能按百分比调整为适合容器的大小！

解决方法:

当前代码无法实现保持子级(及其字体大小)与父级相对大小的意图的原因是,您无法测量原始子级和父级的尺寸/比例,因此无法计算其尺寸已更改(并扩展了您需要更改子尺寸/字体大小的数量).

利用此信息进行计算的一种方法是在进行任何调整大小之前将其存储在数据属性中：

// Storing initial parent CSS
$('.parentElement').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
});

// Storing initial children CSS
$('.parentElement *').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
    $(this).data("fontSize", parseInt($(this).css("font-size")));
});

$('.parentElement').resizable({
    resize: function (e, ui) {
        var wr = $(this).outerWidth()/$(this).data("width");
        var hr = $(this).outerHeight()/$(this).data("height");

        $(this).find("*").each(function (i, elm) {
            var w = $(elm).data("width") * wr;
            var h = $(elm).data("height") * hr;
            // Adjusting font size according to smallest ratio
            var f = $(elm).data("fontSize") * ((hr > wr) ? wr : hr);
            $(elm).css({
                "width": w,
                "height": h,
                "font-size": f
            });
        });
    },
});

现在,随着.parentElement的每次调整大小,都会计算其当前尺寸与原始尺寸的比率,然后乘以其子元素的尺寸和字体大小.

这是一个JSFiddle来演示.希望这可以帮助！如果您有任何疑问,请告诉我.

标签：elements,children,resizable,javascript,jquery
来源： https://codeday.me/bug/20191028/1950053.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。