Question

我一直在寻找这个问题的答案1天，但还没有找到它！

我希望调整所有子元素的大小，方法是在调整父元素大小时计算并比较父元素的大小，然后将宽度和高度应用于每个子元素。

我已编写了一些代码行，但这似乎没有按预期工作。通过这种方式，孩子们的身材变得疯狂：

[Semantical Error] The annotation "@Template" in method BReel\LVBundle\Entity\Journey::setJourneyOrder() was never imported. Did you maybe forget to add a "use" statement for this annotation?

也许有人可以帮我纠正上面的代码，以便儿童元素的调整顺利进行！

修改

这是this section。

你可以看到，根据我上面的代码，孩子们的体型会变得很疯狂，而我希望他们能够顺利地调整孩子的父母大小。

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

Answer 1

您当前代码无法实现保持子项（及其字体大小）与其父项相对大小的意图的原因是您没有测量原始子项和父项维度/比率，因此您无法计算多少它们的尺寸已经改变（并且通过扩展来改变子尺寸/字体大小需要多少）。

利用此信息进行计算的一种方法是在调整大小之前将它们存储在data属性中：

// 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来演示。希望这可以帮助！如果您有任何问题，请告诉我。

jQuery - UI可调整大小调整所有子元素及其字体大小

1 个答案: