<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <input id="width" type="text" value="320"> <input id="height" type="text" value="548"> <button id="resize">Resize</button> <div class="wrapper" style="width: 320px; height: 548px;"> <div class="phone-body"> <div class="phone-area"> <!-- Your code here --> <div> <div class="center"> <img src="http://lorempixel.com/people/420/420/"> </div> </div> <!-- End code --> </div> </div> </div>

body { padding: 10px; background: #aaa; } .wrapper { position: absolute; top: 40px; left: 40%; } .phone-body { border: 10px solid black; border-radius: 10px; width: calc(100% + 20px); height: calc(100% + 20px); } .phone-area { width: 100%; height: 100%; background: #fff; overflow-y: auto; overflow-x: hidden; } .center { width: 80%; margin: auto; } .center > img { width: 100%; } .center:before { content: ''; vertical-align: middle; display: inline-table; }

$(function() { $('#resize').click(function() { var width = $('#width').val(); var height = $('#height').val(); var style = 'width: ' + width + 'px; height: ' + height + 'px;'; $('.wrapper').attr('style', style); }); });