Question

我有一个带有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

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

Answer 2

将其大小调整为父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/

Answer 3

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

.play {
    height: 25%;
}

根据容器的大小调整div

3 个答案: