2

私が直面しているこれらの問題にどのように取り組むことができるか疑問に思っています。

デモ
JS Bin デモ

私が達成しようとしているのはこれです：

  1. .displayそのコンテンツは画面のサイズに適応する必要があります。ビューポートの幅が狭すぎる場合 (ビューポートの高さと同じ) –.display 縮小し、囲まれたすべてのアイテムの比率を維持する必要があります。

  2. .displayすべてのコンテンツは、垂直方向および水平方向の中央に配置する必要があります。

  3. vimeo アイテムの縦横比を画像と同じにします (vimeo 埋め込みは 16x9 の縦横比を強制しますが、ビデオの高さを画像と同じにして、vimeo に黒いバーを追加して埋めるようにしたいと思います)。

余談ですが、実際のコンテンツの上に div を絶対配置しているため (.cursor .leftおよび.cursor .right)、vimeo ビデオを制御することは、多少問題があることがわかります。これらの div と同じように機能する可能性があるが、その下のコンテンツとの相互作用を可能にするソリューションは他にありますか?

これは、絶対的な死点があり、サイズ変更時に囲まれたアイテムの比率を維持するサイトです。これはまさに私が達成しようとしているものです。JSが関与していること以外に、彼らがこれをどのように実現したのかわかりませんでした。 ビューローコレクティブ


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 に答える