Question

网站的想法是在后台播放视频，当你去浏览时，它会占用浏览器的整个宽度和高度。然后向下滚动并获取其余内容。到目前为止，我有视频部分工作。导致我麻烦的部分是需要包含iphone的图片。大约一半的手机正在掩盖视频的一部分。另一半你需要向下滚动才能看到（以及其他内容）。我需要手机1.无论窗口大小，总是出现在那个位置; 2.缩放为手机大小与窗口大小的比例。

我已经尝试了很多功能来实现这一功能，但它似乎还没有为我效用。

<script>
        $(function(){
            $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

            $(window).resize(function(){
                $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
            });
        });

    </script>
</head>
<body>
    <iframe id="video" src="http://www.youtube.com/embed/SLTVLIjvdnw?HD=1;autoplay=1;controls=0;showinfo=0;" frameBorder="0" allowfullscreen></iframe>
    <div id="box">
        <img id="iphone" src="img/phone.png" alt="iPhone" />
    </div>
    <div id="test"></div>
</body>

html, body {
border: 0px;
margin:0px;
padding:0px;
}

body {
overflow: hidden;
}

#test {
width:400px;
height:400px;
background-color:blue;
}

#box {
position:absolute;
max-width:280px;
left:10%;
top:380px;
}

#iphone {
max-width: 100%;
}

Answer 1

这是一个纯CSS解决方案，假设我正确理解了问题：

http://jsfiddle.net/5aVZa/1/

CSS：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.video {
    background: black;
    width: 100%;
    height: 100%;
}
.iphone {
    width: 50%;
    margin: 0 auto;
    display: block;
    margin-top: -25%;
    position: relative;
    z-index: 2;
}

使图像在屏幕上显示一半，另一半滚动查看

1 个答案: