如何将HTML对象置于移动容器内

Question

我想在我的网页中放置一张手机图片，并且希望所有内容都显示在手机内。为了实际演示，请查看http://goratchet.com/components/，并告诉我如何做到这一点。现场演示。

- user6869854

Answer 1

尝试这个代码片段：https://jsfiddle.net/nwmbm21f/ HTML：

<div class="device" style="" id="barsInDevice" style="background-color:Lime;"></div>

CSS：

.device {
    position: relative;
    top: 50px;
    display: block;
    width: 395px;
    height: 813px;
    margin-left: -20px;
    font-family: "Helvetica Neue",sans-serif;
    background-image: url(http://goratchet.com/assets/img/device-sprite.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 300%;
    -webkit-transition: background-image .1s linear;
    -moz-transition: background-image .1s linear;
    transition: background-image .1s linear;
}

你只需要在图片的边界内添加你所需的内容。

- JC Hernández

---

它不起作用。我将一些内容放在div标签中，但内容超出了手机屏幕。然后我将一些内容放在body标签中，结果也是一样。有任何建议吗？ - user6869854

这是基于 "device" 元素的 div。您想要放在其中的每个元素都必须对您正在呈现的页面的 DOM 有效，因此您不能在其中添加 <body/> 标记。以下是 HTML 的 DOM 树的快速指南：http://www.w3schools.com/js/js_htmldom.asp - JC Hernández