Question

我不能为我的生活让我的视频适合背景图像。我不确定我是否应该在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>
    </div>
</div>



div#video1 {
    float: right;
    background-image: url(images/vidborder.png);
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: -50px center;
    width: 500px;
    height: 450px;
}

div#video2 {
    background-image: url(images/vidborder2.png);
    background-size: 10%;
    background-repeat: no-repeat;
    width: 500px;
    height: 450px;
}

.videos {
    margin-top: 40px;
}

iframe {
    margin-top: 35px;
}

Answer 1

您可以将display: table-cell和vertical-align: middle与text-align: center一起使用以下内容：

div#video1 {
  display: table-cell;/*add display table-cell so you can use vertical-align*/
  background-color: green;
  background-size: 110%;
  background-repeat: no-repeat;
  width: 500px;
  height: 450px;
  vertical-align: middle;/*add vertical align middle to achieve vertical align to the middle*/
  text-align: center;/*use text align center for horizontal align*/
}
div#video2 {
  display: table-cell;/*add display table-cell so you can use vertical-align*/
  background-color: red;
  background-size: 10%;
  background-repeat: no-repeat;
  width: 500px;
  height: 450px;
  vertical-align: middle;/*add vertical align middle to achieve vertical align to the middle*/
  text-align: center;/*use text align center for horizontal align*/
}
.videos {
  margin-top: 40px;
  display: table;/*add display table to main container*/
}

<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>
  </div>
</div>

我的背景图片不适合我的视频元素

1 个答案: