Javascript 如何按比例调整绝对元素的大小？

我有一个背景图像和一些其他元素

当我调整浏览器的大小时，我希望绝对元素能够调整它们自己的大小并保持它们的比例

---

当您说要调整元素的大小时，您的具体意思是什么？ 它们应该变大/变小吗？与页面保持相同的相对大小

如果希望它们与页面的相对大小保持不变，可以使用vw或vh单位。喜欢 宽度：20vw； 高度：8vw

如果你想将比例保持在一个固定的比例范围内，你可以像这样使用填充 宽度：300px；

---

填充底部：75%；// 这是我经过研究后得出的结论。不确定它是否符合你的要求

下面是HTML标记

<div style="position:relative">
    <div style="background: transparent url('http://via.placeholder.com/600x300') no-repeat;
    width: 100%; height: 300px; background-size: contain
    "></div>

    <div style="width : 100px;height : 75px;position : absolute; background: green;top : 50px;" class="dyn" data-defaultwidth="" data-defaultheight=""></div>
    <div style="width : 100px;height : 75px;position : absolute; background: red;top : 100px;" class="dyn" data-defaultwidth="" data-defaultheight=""></div>
</div>

---

用百分比表示宽度和高度如何？我不能这样做。需要固定值。您的意思是相对于其父div调整大小，还是相对于文档高度和宽度调整大小？我的意思是变小，因为当前的宽度和高度是最高的。我试试大众汽车。是的，我确实对它们很满意。

$(document).ready(function(){
    var oldWidth = parseInt($(window).width());
    var oldHeight = parseInt($(window).height());

    $("div.dyn").each(function(){
        $(this).attr("data-defaultwidth", $(this).css("width"));
        $(this).attr("data-defaultheight", $(this).css("height"));
    });

    var resizeTimer;

    $(window).on('resize', function(){
        if (resizeTimer) {
            clearTimeout(resizeTimer);   // clear any previous pending timer
        }

        resizeTimer = setTimeout(function() {
            resizeTimer = null;
            var newWidth = parseInt($(window).width());
            var newHeight = parseInt($(window).height());
            $("div.dyn").each(function(){
                var thisWidth = parseInt($(this).data("defaultwidth"));
                var thisHeight = parseInt($(this).data("defaultheight"));
                console.log(thisWidth * newWidth / oldWidth);
                $(this).css("width", (thisWidth * newWidth / oldWidth));
                $(this).css("height", (thisHeight * newHeight / oldHeight));
            });
            oldWidth = newWidth;
            oldHeight = newHeight;
        }, 50);

    });
});