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

Posted 2023-02-25

【中文标题】如何将 div 附加到 html 中的特定维度

【英文标题】：How to attach a div to a particular dimension in html

【发布时间】：2016-09-19 22:35:09

【问题描述】：

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

这是我想要的：

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

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

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

我还通过使用百分比等和模仿 img-responsive 特性来调整 CSS 以使其更具响应性。

我的 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;

结果非常适合调整时。它也是响应式的，但是图像和文本不同步响应。我不知道如何用文字来解释，所以我只是用图片来展示：

完美时：

当不完美时：

【问题讨论】：

任何示例代码？你试过什么？我们不会为您编写此代码，如果您尝试此操作，请发布您的尝试

我确实提到过我想到了 iframe，根据 w3schools 文档，它不支持在 HTML 5 中滚动。我没有要求任何人给我代码，我只是要求指点或正确方向的想法。如果您确实有其他感觉，我会编辑我的问题。

@AdamBuchananSmith：在 Soviut 的回答的帮助下，我尝试更新了我的问题。

【参考方案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> 标签（只要设置了宽度，它就会自动按比例缩放）。然后，您可以设置容器元素的样式以始终适合图像。

【讨论】：

我已经更新了我的问题，还有一些问题。我可能应该将此标记为答案，但是我想知道您对我的编辑的看法。

@GauravPandey 您面临的问题是图像的缩放比例与您的百分比不同。您需要做的是确保 DIV 始终按比例缩放。您可以使用 div ratio css 技巧来做到这一点，我想我可以将其添加到答案中。