<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="dynamicTile"> <div class="row" style=""> <div class="col-md-1 col-sm-6 col-xs-12" id="baseline" style="display:none"></div> <div class="col-md-6"> <div class="bdtile border" data-height="4"> <div class="col-md-6 horizontal"> <h4 class="lighter">Tile Header</h4> </div> <div class="col-md-6 nopadding horizontal"> <div class="imgthumbnail horizontal"> <img src="https://unsplash.it/800/800/?random" class="" /> </div> </div> </div> </div> <div class="col-md-2 pull-right"> <div class="bdtile border" data-height="4"> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="" /> </div> </div> <div class="col-md-12 subtile"> <h4 class="lighter">bdtile Header</h4> hello hello </div> </div> </div> <div class="col-md-2"> <div id="tile3" class="bdtile border" data-height="2"> <div class="carousel imgthumbnail slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="https://unsplash.it/800/800/?random" class="img-responsive" /> </div> </div> </div> <div class="tilecaption black"> Caption</div> </div> </div> <div class="col-md-2"> <div id="tile3" class="bdtile border" data-height="2"> <div class="carousel imgthumbnail slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="https://unsplash.it/800/800/?random" class="img-responsive" /> </div> </div> </div> <div class="tilecaption black">bdtile Caption</div> </div> </div> <div class="col-md-2"> <div class="bdtile border spacetop" data-height="2"> <div class="carousel imgthumbnail slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="https://unsplash.it/800/800/?random" class="img-responsive" /> </div> </div> </div> <div class="tilecaption black">bdtile Caption</div> </div> </div> <div class="col-md-2"> <div class="bdtile border spacetop" data-height="2"> <div class="carousel imgthumbnail slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="https://unsplash.it/800/800/?random" class="img-responsive" /> </div> </div> </div> <div class="tilecaption black">bdtile Caption</div> </div> </div> <div class="clearfix" style="padding-bottom:10px;"></div> <div class="col-md-2"> <div class="bdtile border" data-height="2"> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="col-md-12 subtile"> <h4 class="lighter">bdtile Header</h4> hello hello </div> </div> </div> <div class="col-md-2"> <div id="tile4" class="bdtile border" data-height="2"> <div class="col-md-12 subtile"> <h4 class="lighter">bdtile Header</h4> hello hello </div> <div class="col-md-12 subtile nopadding"> <div class="imgthumbnail subtile"> <img src="https://unsplash.it/800/800/?random" class="portrait"/> </div> </div> </div> </div> <div class="col-md-2"> <div id="tile4" class="bdtile border black" data-height="2"> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="col-md-12 subtile"> <h4 class="lighter">bdtile Header</h4> hello hello </div> </div> </div> <div class="col-md-2"> <div id="tile4" class="bdtile border black" data-height="2"> <div class="col-md-12 subtile"> <h4 class="lighter">bdtile Header</h4> hello hello </div> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> </div> </div> <div class="col-md-4"> <div id="tile4" class="bdtile border black" data-height="2"> <div class="col-md-12 subtile"> <h4 class="lighter">bdtile Header</h4> hello hello </div> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> </div> </div> <div class="clearfix" style="padding-bottom:10px;"></div> <div class="col-md-6"> <div id="tile4" class="bdtile border" data-height="3"> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="col-md-12 subtile"> <h4 class="lighter">bdtile Header</h4> hello hello </div> </div> </div> <div class="col-md-4"> <div id="tile4" class="bdtile border" data-height="3"> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="" /> </div> </div> <div class="subtile col-md-12"> <h4 class="lighter">bdtile Header</h4> hello hello </div> </div> </div> <div class="col-md-2"> <div id="tile4" class="bdtile border" data-height="3"> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail" data-height=".33"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="subtile col-md-12" data-height=".66"> <h4 class="lighter">bdtile Header</h4> hello hello </div> </div> </div> <div class="col-md-3 spacetop"> <div id="tile4" class="bdtile border" data-height="2"> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail" data-height=".33"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="subtile col-md-12" data-height=".66"> <h4 class="lighter">bdtile Header</h4> hello hello </div> </div> </div> <div class="col-md-3 spacetop"> <div id="tile4" class="bdtile border" data-height="2"> <div class="subtile col-md-12" data-height=".5"> <h4 class="lighter">bdtile Header</h4> hello hello </div> <div class="col-md-12 nopadding"> <div class="subtile imgthumbnail" data-height=".5"> <img src="https://unsplash.it/800/800/?random" class="" /> </div> </div> </div> </div> <div class="col-md-3 spacetop"> <div class="bdtile border" data-height="1"> <div class="col-md-6 horizontal nopadding"> <div class="imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="col-md-6 horizontal"> <h4 class="lighter">bdtile Header</h4> </div> </div> </div> <div class="col-md-3 spacetop"> <div class="bdtile border black" data-height="1"> <div class="col-md-6 horizontal nopadding"> <div class="imgthumbnail"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="col-md-6 horizontal"> <h4 class="lighter">bdtile Header</h4> </div> </div> </div> <div class="col-md-6 spacetop"> <div class="bdtile border black" data-height="1"> <div class="col-md-6 horizontal nopadding"> <div class="imgthumbnail" data-height="3"> <img src="https://unsplash.it/800/800/?random" class="portrait" /> </div> </div> <div class="col-md-6 horizontal"> <h4 class="lighter">bdtile Header</h4> </div> </div> </div> </div> </div>

.dynamicTile h4 { font-size:18px !important; } .absbottom { position:absolute: bottom:0; } .lighter { font-weight: 400; } .bdtile { background-color: white; color: black; position:relative; overflow:hidden; } .spacetop { margin-top:10px; } .border { border:1px solid #bbbcbc; } .black { background-color:black; color:white !important; } .black .tilecontent { border-right:1px white solid; } .white { background-color:white; color: black !important; } .nopadding { padding:0px !important; } .tilecaption{ position: absolute; z-index:1000; width:100%; bottom: 0%; height: 15%; /* transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); */ margin:0!important; text-align: center; color: inherit; font-weight: lighter; } .imgthumbnail { position: relative; overflow: hidden; } .imgthumbnail img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .imgthumbnail img.portrait { width: 100%; height: auto; }

$( document ).ready(function() { resizeTiles() $(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 10); }); $(window).bind('resizeEnd', function() { resizeTiles(); }); }); function resizeTiles() { basewidth = $('#baseline').width(); console.log(basewidth) $('.bdtile').each(function(i,v) { $(this).height(basewidth) if($(this).data('height')) { $(this).height($(this).data('height')*basewidth) $(this).find('.item').height($(this).data('height')*basewidth) } }); $('.subtile').each(function(i,v) { $(this).height($(this).parents('.bdtile:first').height()/2); if($(this).data('height')) { var newHeight = $(this).data('height')*$(this).parents('.bdtile:first').height() $(this).height(newHeight) $(this).find('item').height(newHeight) } }); $('.horizontal').each(function(i,v) { $(this).height($(this).parents('.bdtile:first').height()); $(this).find('.imgthumbnail').height($(this).parents('.bdtile:first').height()); }); }