So platzieren Sie HTML-Objekte in einem mobilen Container

Question

Ich möchte ein Bild von mobilen in meiner Webseite platzieren und ich möchte alle Inhalte in diesem mobilen zeigen. Für praktische Demonstration, bitte sehen Sie auf http://goratchet.com/components/ und bitte sagen Sie mir wie es kann getan werden. Live Demo

Answer 1

dieses Snippet Versuchen: 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; 
} 

Sie brauchen nur den Inhalt, der innerhalb der Grenzen des Bildes hinzufügen müssen.