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

Question

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

缩略图的大小并不总是相同的。它动态变化，这也是我想要使用我不熟悉的CSS来处理箭头的方法。缩略图附加在跨度上。通过CSS，我给出了特定的尺寸，并自动将缩略图适应它。我还没有对箭头做同样的事情。我正在使用的CSS代码以下内容。无法正常工作的块在.x1 a ::

之前

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%;  
}

更新

我已经将html嵌入了JavaScript中：

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中的视口大小如何，都无法根据容器大小设置字体大小。如果容器占用了整个视口，则可以使用视口单元，但是这里不是这样

因此，您必须使用一些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