javascript - 使用jQuery将文本的高度调整为图像的高度

原文 标签 javascript jquery css responsive-design

我正在尝试抓住视频播放器中图像的高度,该时间长度应为制作该播放器的任何尺寸的一半。我正在使用以下方法尝试此操作,但它不起作用:

//grabs height of play button and sets value to setHeight variable
var setHeight = $(".play").outerHeight() / 2; 

//appends setHeight variable to time-played and time-total
$(".time-played, time-total").height(setHeight);


当前设置:jsfiddle

最佳答案

实际上,如果我正确理解了您的问题,那么我根本就不需要您的Javascript代码段。

只需使用CSS放置控件即可:

.timeline .time-total{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    ...
  }

.timeline .time-played{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
...
 }


通过将顶部设置为容器高度的一半,然后将元素平移其高度的一半来工作。

Fiddle

关于javascript - 使用jQuery将文本的高度调整为图像的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28727998/

相关文章:

javascript - jQuery toggle()在YouTube订阅按钮上不起作用

javascript - 我在 Bootstrap 中有一个表-如何添加包含所选行的删除按钮的列?

html - 如何创建两个CSS类并防止换行

css - 如何增加在其中带有文本的字体超赞图标的大小(使用fa-stack)

javascript - 当值相等时,React 钩子(Hook) useState setValue 仍然重新渲染一次

javascript - 通过功能更改<audio>标签src

javascript - 从html输入中获取值

javascript - CSS 转换未在所有浏览器中使用 jQuery 更新

javascript - 按值从数组中删除项目

jquery - 使用窗口调整大小的响应式导航栏