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

时间:2018-04-05 05:37:07

标签: javascript html css css-position absolute

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

当我调整浏览器大小时,我希望绝对元素能够自己调整大小并保持其比例。



<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>
&#13;
&#13;
&#13;

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

任何想法?我只使用CSS或JavaScript

2 个答案:

答案 0 :(得分:1)

当你说你想要调整元素大小时,具体是什么意思? 它们应该变大还是变小?保持与页面相同的相对大小?

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

如果你想将比例保持在一个固定的比例范围内,你可以使用填充 宽度:300px; 填充底部:75%; //&lt; - 将始终是宽度的75%。

如果您的元素中包含内容,那么这将无效,那么您最好只使用JavaScript计算高度。

答案 1 :(得分:0)

经过一番研究后,这就是我想出来的。不确定它是否符合您的要求。

以下是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代码段如下所示。

$(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/