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

Question

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

这是我想要的：

上图是 iphone 线框。我想在 iphone 屏幕的范围内插入 div 或任何其他元素。

我确实搜索了 iframe。但是 html5 不支持 scrollview。所以我一直在寻找另一种方法。

我正在使用 bootstrap 3 并希望它能够响应（仅供参考）。

编辑所以我尝试了 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>

编辑：为了应对您的容器元素没有保持精确比例这一事实，您需要使用 this CSS trick 来做到这一点。

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

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

How to attach a div to a particular dimension in html

html

css

svg

mask

clip