绝对居中元素与子元素（包含imgs/iframes），同时保持他们的纵横比调整大小

Question

我想知道如何解决我面临的这些问题。

演示
JS Bin Demo

我试图实现这一目标是：

1. .display和它的内容应该适应屏幕大小。如果视口宽度太窄（与视口高度相同） - .display 应缩小，所有封闭的项目应保持它们的比例。

2. .display并且所有内容都应居中，纵向和横向。

3. 让vimeo项目具有与图像相同的纵横比（vimeo嵌入力16x9纵横比，但我希望视频 的高度与图像相同，并让vimeo添加黑条以填充 out）。
   

而且在一个侧面说明，因为我有实际内容（.cursor .left和.cursor .right）控制VIMEO视频将被证明是有点问题上面绝对定位的div。有没有其他的解决方案可以像这些div一样使用相同的方式，但是可以与下面的内容进行交互？

这是一个网站，有绝对死点，并保持封闭的项目的比例时调整大小，这正是我想要实现的。除了涉及JS之外，我无法弄清楚他们是如何实现这个目标的。 Bureau Collective

HTML

<div class="display"> 
    <div class="cursor left"></div> 
    <div class="cursor right"></div> 
    <div class="work-carousel"> 
     <div class="item"><img src="http://lorempixel.com/output/abstract-q-c-1080-675-7.jpg"></div> 
     <div class="item"><img src="http://lorempixel.com/output/nightlife-q-c-1080-675-9.jpg"></div> 
     <div class="item"><iframe src="http://player.vimeo.com/video/57840967?title=0&amp;byline=0&amp;portrait=0&amp;color=000000" width="1080" height="608" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div> 
    </div> 
</div> 

CSS

.display { 
    position: relative; 
    width: 1080px; 
} 

.cursor.left { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 45%; 
    z-index: 999; 
} 

.cursor.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    width: 45%; 
    z-index: 999; 
} 

.work-carousel { 
    margin:50px auto 60px; 
    padding:0; 
} 

.work-carousel item { 
    max-height: 100%; 
    max-width: 100%; 
    display: none; 
} 

.work-carousel item.first { 
    display: block 
} 

Answer 1

我想我从来没有使用这种技术！

的诀窍是在padding：

.display { 
    position: relative; 
    width: 100%; 
    height:0; 
    padding:56.25% 0 0 0; 
} 
.item{ 
    width: 100%; 
    height: 100%; 
} 
.item > * { 
    width: 100%; 
    height: 100%; 
} 

以下是演示：http://jsbin.com/epeqar/7/edit