2

I'm wondering how I can tackle these problems I'm facing.

Demo
JS Bin Demo

What I'm trying to achieve is this:

  1. .display and it's content should adapt to the size of the screen. If the viewport width is too narrow (same with viewport height) – .display should shrink and all enclosed items should keep their ratio.

  2. .display and all content should be centered, vertically and horizontally.

  3. Let vimeo items have the same aspect ratio as the images (vimeo embed forces 16x9 aspect ratio, but I'd like the height of the video to be the same as the images and let vimeo add black bars to fill out).

And on a side note, as I have absolute positioned divs above the actual content (.cursor .left and .cursor .right) controlling the vimeo video will prove to be somewhat problematic. Are there any other solutions out there that could potentially work the same way as these divs do but enable interaction with the content underneath?

Here's a site that have absolute dead center and that keeps ratio of the enclosed items when resized, this is exactly what I'm trying to achieve. I could not figure out how they made this happen other than JS is involved. 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 
}
4

1 回答 1

-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

于 2013-02-26T20:34:37.610 回答