Question

我想在视频缩略图上绘制一个播放器的箭头，使其看起来像视频。

缩略图的大小并不总是相同。它动态变化，这也是我想用css做的事情，我不熟悉它。拇指尾附加在跨度上。通过CSS我给出了跨度的特定尺寸，并自动缩略图适应它。我没有设法用箭头做同样的事情。我正在使用的css代码如下。无法正常工作的块位于.x1 a :: before

之下

span.x1 {
display:block;  
height:30px;
width:30px;

}
.x1 img
{
 width: 100%;
 height:100%;
}

的修订版 的

.x1 a::before{
color: white;
content: "\25B6";
opacity: 0.5;
position: absolute;
text-shadow: 0 3px black;
z-index: 100;
font-size:100%;
position:absolute;
left:50%;
top:50%;  
}

的修订版 的

我在这样的javascript中嵌入了html：

span_element = $('<span>').attr(word.html).addClass('x'+ weight + " " + custom_class);
span_element.append('<a id="thumblink" href="'+ link +'" "    target="_blank"><img  src="' + thumblink +'" border="2px"/></a>');

并且生成的html是：

<span id="wordcloud_word_145" class="x1 cloud-links image-results" data-id="128" style="position: absolute; left: 51.2636px; top: 38.5956px;">
<a id="imagelink" target="_blank" "="" href="http://www.youtube.com/watch?v=0_YJToyOp_4">
    <img border="2px" src="https://i.ytimg.com/vi/0_YJToyOp_4/mqdefault.jpg"></img>
</a>

</span>

提前感谢您的帮助。

Answer 1

无论纯CSS中的视口大小如何，都无法根据容器大小设置字体大小。如果容器占用了整个视口，那么它是possible using viewport units，但这不是这里的情况

因此，您必须使用一些JavaScript。我这样做的方法是检测容器的高度/宽度，找到两者中较小的值，然后根据小尺寸的比例设置字体大小（在我的情况下为3/4）。

我创建它是一个函数，你可以将它应用于许多元素，如果你愿意，你只需要为每个元素及其容器调用它。如果格式始终基于类一致，您可以轻松地将其更改为只需要传递容器的位置，它就可以正常工作

代码

var container = document.getElementById("wordcloud_word_145"),
    link = document.getElementById("imagelink");

setPlayButtonSize(link, container);

function setPlayButtonSize(button, target) {
    var width = target.clientWidth,
        height = target.clientHeight,
        smaller = width,
        fontSize = "100px";
    if(height < width) smaller = height;
    fontSize = (3*smaller/4) + "px";
    button.style.fontSize = fontSize; 
}

Demo

如何使用CSS使图像缩略图看起来像视频

1 个答案: