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

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

尝试

padding : 10px;
background-size: cover;

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

Answer 2

您已经非常接近解决方案了。

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.

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

Background-image being cut off when trying to make it fit around the element

html

css

background-image