div内の特定の次元にdivを付けるには

Question

私は、ある種のビジュアルエミュレータを開発しています。ここで

は私が望むものです：

上記画像は、iPhoneのワイヤフレームです。私はdivまたは他の要素をiPhoneの画面の境界内に挿入したいと思います。

iframeを検索しました。しかし、html5はスクロールビューをサポートしていません。だから私はそれを別の方法でやる方法を模索していた。

私はブートストラップ3を使用しており、反応しやすいようにしたいと考えています（FYI）。

EDIT だから私は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-responsiveの特性を模倣しています。私の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>

EDIT：あなたのコンテナ要素は、あなたがそうするようにthis CSS trickを使用する必要があり、正確な比率を維持していないという事実に対処します。

もう1つの選択肢は、実際の<img>タグ（幅のみが設定されている限り自動的に比率で縮尺されます）を使用することです。コンテナエレメントをスタイルに合わせて、常に画像にフィットさせることができます。