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

【问题标题】：How to proportionally resize absolute elements?如何按比例调整绝对元素的大小？
【发布时间】：2018-09-14 19:58:58
【问题描述】：

我有一个背景图片和其他一些绝对定位的元素。

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

<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;"></div>
  <div style="width : 100px;height : 75px;position : absolute; background: red;top : 100px;"></div>
</div>

或https://jsfiddle.net/2sx7nw5d/4/

有什么想法吗？我可以只使用 CSS 或 JavaScript

【问题讨论】：

宽度和高度使用百分比怎么样？
在我的情况下不能这样做。需要修正值。
你的意思是相对于其父div调整大小，还是相对于文档的高度和宽度调整大小？

标签： javascript html css css-position absolute

【解决方案1】：

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

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

如果您想将比例保持在一个固定比例内，您可以使用填充，例如宽度：300px；底部填充：75%； //

如果您的元素中有内容，这将不起作用，那么您最好只使用 JavaScript 计算高度。

【讨论】：

我的意思是变小，因为当前的宽度和高度是最高的。我试试大众单位。是的，我确实有内容。

【解决方案2】：

这是我经过一番研究后得出的结论。不确定它是否符合您的要求。

以下是 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>

所需的 jQuery sn-ps 如下。

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

    });
});

https://jsfiddle.net/pktk8obb/39/

【讨论】：