iphone剪影与滚动图像里面 [英] iphone silhouette with scrolling image inside

问题描述

我想做一个iPhone的覆盖与滚动图像内部展示移动网站设计，但图像不滚动与重叠的iphone顶部是有什么我做错了，我如何解决它？ / p>

演示： http://jsfiddle.net/jonathanl5660/ Lao36z20 /

---

 < div& 
< img src =https://dl.dropboxusercontent.com/u/9833562/iphone.pngwidth =370pxheight =800pxstyle =position：absolute;> 
< / div> 
< div style =width：300px; height：700px; overflow：scroll; margin：30px; position：relitive;> 
 
< img src =https://dl.dropboxusercontent.com/u/9833562/mtest.pngwidth =98％height =700pxalt =style = margin-top：150px; margin-left：10px; />< br /> 
< br /> 
 
< / div> 
  

解决方案

>

 < div class =iphone> 
< div class =container> 
< img src =https://dl.dropboxusercontent.com/u/9833562/mtest.pngalt =/> 
< / div> 
< / div> 
  

然后使用CSS调整外观：

  .iphone {
 width：370px; 
 height：800px; 
 background：url（'https://dl.dropboxusercontent.com/u/9833562/iphone.png'）no-repeat center; 
 background-size：100％; 
} 
 .container {
 position：relative; 
 top：152px; 
 width：293px; 
 margin：auto; 
 max-height：496px; 
 overflow：auto; 
} 
 .container img {
 width：100％; 
} 
  

检查此 demo Fiddle

I am trying to make a iphone overlay with a scrolling image inside to showcase mobile website designs, but the image isn't scrolling with the overlayed iphone on top is there something I am doing wrong and how do I fix it?

DEMO: http://jsfiddle.net/jonathanl5660/Lao36z20/

---

<div>
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; ">
</div>
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;">

<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br />
<br />

</div>

解决方案

You could structure your html like this:

<div class="iphone">
    <div class="container">
        <img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/>
    </div>
</div>

And then with CSS adjust the look :

.iphone {
    width:370px;
    height:800px;
    background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center;
    background-size:100%;
}
.container {
    position:relative;
    top:152px;
    width:293px;
    margin:auto;
    max-height:496px;
    overflow:auto;
}
.container img {
    width:100%;
}

Check this demo Fiddle

这篇关于iphone剪影与滚动图像里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！