如何在html中将div附加到特定维度

Question

我正在为应用程序开发一种视觉模拟器。

这里是我想什么：

上面的影像是一个iphone线框。我想在iphone屏幕的边界内插入一个div或任何其他元素。

我搜索了iframe。但html5不支持滚动视图。所以我正在寻找一种方式来做另一种方式。

我使用引导程序3并希望它是响应（FYI）。

编辑 所以，我想Soviut的回答是：

这是我的HTML的一部分：

<div id="page" class="row"> 
    <div id="iOS" class="col-md-6"> 
     <div id="iphone-wireframe" class="container"> 
      <div class="content"> 
       <h1>This is heading</h1> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
       <p>This is some content This is some content This is some content This is some content This is some 
        content This is some content This is some content This is some content.</p> 
      </div> 
     </div> 
    </div> 

我还调整了CSS，使之更适应用百分比等，并通过模仿img响应的特点。我的CSS的

部分：

.container { 
    width: 65%; 
    height: 90%; 
    margin-top: 40px; 

    background-image: url("/assets/res/img/iPhone-wireframe.png"); 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: center; 
} 

.content { 
    margin: 81px auto auto; 
    width: 67.5%; 
    height: 75.5%; 
    background: #FFF; 
    overflow: auto; 
} 

结果是完美的，当它被调整了。它也具有响应能力，但图像和文本无法同步响应。我不知道如何用言语解释这个所以我就用图片显示：

当完美：

如果不是那么完美：

Answer 1

您可以将图像作为容器元素的背景，然后向其添加填充以将内容向内推入，直到它适合边界。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    height: 800px; 
 
    padding: 50px 100px; 
 
    
 
    background: #CCC; 
 
} 
 

 
.content { 
 
    height: 100%; 
 
    background: #FFF; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <h1>This is heading</h1> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p> 
 
    </div> 
 
</div>

编辑：应付的事实，您的容器元素没有保持一个确切的比例，你需要使用this CSS trick这样做。

另一种选择是使用实际的<img>标签（只要设置宽度，就会自动按比例缩放）。然后，您可以将容器元素设置为始终适合图像。