html - 尝试使其适合元素时背景图像被切断

Question

我试图让我的 background-image 适合我的视频，每次我尝试让它变大时，顶部都会被切断，我似乎无法让它真正适合视频并看起来好。

我希望图像成为我的视频的边框。我很确定它与视频 div 外面的图像有关，但我可能会弄错。任何帮助表示赞赏!

HTML:

<div class="videos">
    <div id="video1">
        <iframe width="450" height="315" src="https://www.youtube.com/embed/vr0dXfQQfNU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="video2">
        <iframe width="450" height="315" src="https://www.youtube.com/embed/fevkx229XBs" frameborder="0" allowfullscreen></iframe>
        <!--h <img src="images/vidborder2.png" class="vidborder2">-->
    </div>
</div>

CSS:

div#video1 {
    float: right;
    background-image: url(images/vidborder.png);
    background-repeat: no-repeat;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
div#video2 {
    background-image: url(images/vidborder2.png);
    background-repeat: no-repeat;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-size: 80%;
    background-position: center;
}
.videos {
    margin-top: 40px;
}

Answer 1

您非常接近解决方案。

I am pretty sure it has something to do with the image going out side the video div, but I could be mistaken.

图像不会超出 div .

为了使图像看起来像视频的边框，我们必须添加 padding到 div . (@tylerism 在评论中也提到了)

看看这个 fiddle .

以下是我对您的代码所做的更改。 <罢工>

<罢工>

text-align: center;
background-size: 80%;

<罢工>

padding: 10px 10px;

我用了这个image用于测试目的。您可以替换 url。