我认为flex是开发响应式视频播放器控制栏的一个很好的解决方案。示例为亚马逊播放器的控制栏。
在左侧和右侧我想要方形按钮。进度条占据剩余空间。
我考虑过将 padding-top 设置为等于高度，但它不起作用。
出了什么问题？
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="image/svg+xml"/>
<meta http-equiv="X-UA-Compartible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player flex</title>
<style>
html {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.pic {
position: relative;
width: 100%;
height: 100%;
}
.pic img {
object-fit: contain;
}
.control-bar {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
}
.pause_btn {
flex-grow:1;
background-color: DD88EE;
background-image: url(media/pause-icon-white-48.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-height: 40px;
min-width: 40px;
}
.time {
flex-grow:1;
background-color: #CB8C1D;
min-height: 40px;
min-width: 40px;
}
.fullscreen_btn {
flex-grow:1;
background-color: #4C3327;
background-image: url(media/fullscreen-icon-off-white-48_160.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sound_btn {
flex-grow:1;
background-color: #BD3632;
background-image: url(media/speaker_loud_white_48.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.progress {
flex-basis:50%;
flex-grow:1;
background-color: #4C3327;
min-height: 40px;
min-width: 40px;
}
@media (min-width: 769px) {
.duration{
flex-grow:1;
background-color: #CB8CEE;
min-height: 40px;
min-width: 40px;
}
}
</style>
</head>
<body style="background-color:black; text-align: center;">
<div class="pic">
<img src="media/vorschaubild.png" alt="Smiley face" height="100%" width="100%">
</div>
<div class="">
<div class="control-bar-wrapper">
<div class="control-bar">
<div class="pause_btn">pause</div>
<div class="time">time</div>
<div class="duration"></div>
<div class="progress">progress</div>
<div class="sound_btn">sound</div>
<div class="fullscreen_btn">full</div>
</div>
</div>
</div>
</body>
最佳答案
如果您希望底部的高度和宽度与页面宽度之比，则必须对按钮使用包装器:
.square {
width: 10%; // Width = 10% of page with
}
.square div {
padding-bottom: 100%; // So height = 10% of page width
line-height: 0px; // Avoid additional height
}
按钮元素像这样包裹:
<div class="square">
<div class="pause_btn"></div>
</div>
此外，padding-bottom技术意味着元素不包含任何非绝对元素(否则会增加元素的高度，破坏其方形度)
这就是为什么我删除了字幕并设置 line-height到0
结果如下:https://jsfiddle.net/jsfmb9at/3/
编辑:我删除了 flex-grow: 1从这些非扩展元素中，添加了 max-width到.square css，否则水平播放器上的控制栏太大，这很奇怪......
其他解决方案:
- 对于宽度为页面高度比例的按钮，最简单的方法是设置
control-bar高度占高度的百分比，以及平方<img>元素作为按钮(我看到你使用图像作为背景)并将其包装设置为“display:inline-block” - 要摆脱图像或图像请求，您甚至可以使用
<img>具有内嵌透明图像数据的元素data:具有所需比例的 URI(正方形为 1:1)
关于css - 如何使用 CSS 在 Flex 布局中获得方形按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36179768/