当试图使其适合元素时，背景图像被切断

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

你非常接近解决方案。

  

我很确定它与视频div旁边的图像有关，但我可能会弄错。

图片不会超出div。

要使图片看起来像视频的边框，我们必须将padding添加到div。 （@tylerism在评论中也提到过）

查看此fiddle。

以下是我在您的代码中所做的更改。 <击>

<击>

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

<击>

padding: 10px 10px;

我使用此image进行测试。您可以替换该网址。

Answer 2

尝试

padding : 10px;
background-size: cover;

http://jsbin.com/juguxenufi/edit?css,output