使用 jquery 将文本高度调整为图像高度

Question

我正在尝试抓取视频播放器中图像的高度，持续时间应该是播放器制作的任何尺寸的一半。我正在使用以下方法尝试此操作，但它不起作用：

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

Answer 1

好的，我稍微更改了 fiddle。我保持高度不变并更改时间文本的行高。

这是您要找的吗？

$(".time-played, .time-total").height(setHeight*2);
$(".time-played, .time-total").css('line-height', setHeight*2 + 'px');
$(".time-played, .time-total").css('top', 0);

Fiddle

您可以将前 0 名的样式添加到您的 css 文件中，例如：

.time-played, .time-total {
  top: 0;
}

然后您可以删除以下行：

$(".time-played, .time-total").css('top', 0);

Answer 2

实际上，如果我正确理解你的问题，我认为你根本不需要 Javascript 代码段。

只需将控件放置在 CSS:

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

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

这是通过将顶部设置为容器高度的一半，然后将元素向上移动其高度的一半来实现的。

见Fiddle

使用 jquery 将文本高度调整为图像高度

Adjusting height of text to height of image with jquery

javascript

css

jquery

responsive-design