根据容器的大小调整div

时间:2015-02-13 20:40:18

标签: javascript jquery svg

我有一个带有Javascript生成控件的HTML视频播放器(带有SVG图形的背景图像)。我在使用css calc()函数时遇到问题,需要根据视频控件栏调整div的大小。因此,当窗口扩展/收缩时,控件需要相应地进行调整。

控制div:

//Controls Wrapper
videoObj.controlsWrapper = document.createElement("div");
videoObj.controlsWrapper.className = "video-controls";

控件是动态生成的,因此,例如,播放按钮由此生成:

videoObj.playBtn = document.createElement("button");
videoObj.playBtn.className = "play btn";

所以问题是如何将播放按钮(这是SVG图形的背景)的大小调整为控件包装div高度的百分比(约25%)。

jsfiddle

3 个答案:

答案 0 :(得分:1)

这是最简单的方法...尝试调整框大小:) 父母是亲戚。孩子是绝对的。将top,left,right和bottom all设置为0实际上将创建蜘蛛网效果(或拉伸效果)。我使用不同的像素,所以你可以看到反应。否则孩子将覆盖父母。希望这会有所帮助。

http://jsfiddle.net/m5wm1rLs/

.parent{

    position: relative;
    width: 100px; 
    height: 100px;
    background-color: red;
}

.child{

    position: absolute;
    top: 3px;
    bottom: 20px;
    left: 3px;
    right: 20px;
    background-color: green;
}

<div class="parent">
    <div class="child"></div>
</div>

要测试这是否有效,您可以使父级可调整大小:

$('.parent').resizable();

答案 1 :(得分:0)

将其大小调整为父div高度的25%相对容易,但只能使用脚本语言。至于CSS允许calc(),它不支持拉动指定元素的大小。

这是我为你拼凑的简单剧本:

window.onload = function() {
    resize();
}

window.onresize = function() {
    resize();
}

function resize() {
    document.getElementsByClassName('play')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
}

JSFiddle:http://jsfiddle.net/zq2vzkk5/

我建议您使用id来标识要从中提取值的元素,但如果元素的位置在页面上不会改变,那么class就可以了。您只需要更新要从中提取值的class的哪个实例。

如果你想要一个jQuery变体,我也可以提供它。

我希望这会有所帮助。

修改

这是jQuery变体:

$(function() {
    resize();

    $(window).resize(function() {
        resize();
    });
});

function resize() {
    $('.play').first().width($('.timeline').first().outerHeight() * .25);
}

JSFiddle:http://jsfiddle.net/s51vrca2/

答案 2 :(得分:0)

你可以在没有JS的情况下做到这一点:

.play {
    height: 25%;
}