如何在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>標籤（只要設置寬度，就會自動按比例縮放）。然後，您可以將容器元素設置爲始終適合圖像。