css – 其他元素中的溢出元素

2023年4月10日 218次阅读

我在这个div里面有一个iframe：

<section>
   <div>
      <iframe></iframe>
   </div>
</section>

iframe在flash中包含youtube视频,但在这种情况下可能无关紧要.

我正在构建马赛克,因此尝试使用div将iframe裁剪为合适的大小.

这是由

.section
    {height: 251px;
    width: 198px;
    overflow: hidden}

效果很好,但我想将视频集中在一起.对于图像,我将它们添加为背景图像并使用

background-size: cover

把它们集中起来.这很简洁,因为它们会自动重新缩放到最大可能的大小.但是,这不适用于视频.如果可能的话,我会安排简单地将iframe垂直和水平居中.

最佳答案 将此添加到您的CSS帮助？如果div大于section,它可以工作.

section div {
    margin-top:-50%;
    margin-left:-50%;
}

http://jsfiddle.net/hvCXm/

点赞