如何將HTML對象放置在移動容器中

Question

我想在我的網頁中放置移動圖像，並且想要顯示該移動設備中的所有內容。如需實際演示，請查看http://goratchet.com/components/ ，並告訴我如何可以辦到。 Live Demo

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

你只需要添加你需要的圖像的邊界之內的內容。