Question

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

这就是我想要的：

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

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

我正在使用bootstrap 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-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

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

＆＃13;

<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>

＆＃13;

<img>

＆＃13;

编辑：为了解决您的容器元素没有保持精确比例的事实，您需要使用this CSS trick来执行此操作。

另一个选项是使用实际的.box { position: relative; width: 200px; height: 200px; background-color: #333; } .box p { color: green; position: relative; z-index: 2; } .box:before { content: ''; display: none; position: absolute; background: url('https://ewans.files.wordpress.com/2008/07/grey1.jpg'); top: 0; left: 0; width: 200px; height: 200px; } .box:hover:before { display: block; }标记（只要设置了宽度，就会自动按比例缩放）。然后，您可以设置容器元素的样式以始终适合图像。

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

1 个答案: