<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 ---------->
<!DOCTYPE html>
<html>
<head>
<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<style>
body {
font-family: 'Raleway';
}
</style>
</head>
<body>
<div class="containerfluid">
<div class="banner" style="width:100%;">
<img src="http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg" class="fit banner-image" >
<div class="banner-title">
<h1>Element Name</h1>
</div>
<div class="profile-container" style="">
<div class="profile-image overflow-centered">
<img src="http://i.imgur.com/yIUgF5Y.jpg" class="fit" alt="Avatar" />
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="nav nav-pills nav-stacked col-md-1">
<li role="presentation" class="active text-center"><a href="#">A</a></li>
<li role="presentation" class="text-center"><a href="#">B</a></li>
<li role="presentation" class="text-center"><a href="#">C</a></li>
</ul>
<!--<div class="element-nav">
<div class="row">
<div class="tab-option col-md-3 text-center">Option 1</div>
<div class="tab-option col-md-3 text-center">Option 1</div>
<div class="tab-option col-md-3 text-center">Option 1</div>
<div class="tab-option col-md-3 text-center">Option 1</div>
</div>
</div>-->
<div class="content col-md-10" style="font-size: 16px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin sed magna ut luctus. Sed eget quam et eros fermentum lacinia. Nulla pulvinar urna vitae orci ullamcorper ultrices. Nullam tincidunt facilisis ex. Integer condimentum mauris non faucibus vestibulum. Aenean ornare consequat justo id pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vel nulla quis enim pulvinar consequat. Nulla facilisi. Donec at ante tellus. Nullam sed purus quis tortor maximus posuere.
Sed mi purus, consectetur sit amet luctus in, fermentum vitae nisl. Vestibulum porta egestas arcu, in luctus turpis sollicitudin id. Cras fringilla, metus venenatis faucibus tempor, erat lacus pretium massa, et iaculis arcu ante eget urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tempor, elit id consequat ultricies, turpis ex accumsan ipsum, quis vestibulum sem velit et dui. Etiam scelerisque tortor quis lacus aliquam efficitur. In dapibus pellentesque ipsum, sed molestie risus efficitur ac. Etiam eget nisi non libero sollicitudin maximus. Etiam et diam rutrum, efficitur odio ut, luctus tellus. Duis aliquam metus dolor, sit amet luctus turpis maximus non. Proin at sagittis mauris. Vivamus pretium maximus odio sit amet ultrices. Nulla purus nunc, fermentum vel tincidunt laoreet, efficitur ut mauris. Nam eget dolor blandit, mollis odio at, pharetra dui. Donec porttitor purus ligula, nec gravida ipsum sollicitudin ac.
Nullam et tristique arcu, id blandit mi. Aliquam erat volutpat. Nulla blandit commodo aliquam. Aliquam erat volutpat. Nullam turpis risus, molestie et arcu nec, laoreet vulputate risus. Aenean pretium augue dolor, sed varius justo venenatis eu. Aenean dolor libero, tristique id ornare vitae, sollicitudin ut diam.
Quisque luctus auctor mauris, a condimentum nunc sagittis vel. Quisque blandit nibh sed enim posuere iaculis. Sed vehicula sem semper, placerat metus in, efficitur magna. Aenean mi enim, congue id magna a, varius vehicula nisl. Proin in dui consectetur, molestie tortor at, pellentesque purus. Mauris efficitur ipsum non egestas ornare. In sed condimentum nisl.
Mauris justo nisl, feugiat nec ante quis, pharetra dignissim risus. Aliquam a aliquet lacus, at vulputate magna. Sed non mi sit amet nunc pellentesque hendrerit vel ac sapien. Aliquam erat volutpat. Integer a felis in quam malesuada congue in nec enim. Sed dictum faucibus enim in luctus. Aliquam ac nisi vitae sapien blandit vestibulum vel ut eros. Aliquam vel libero ac nisl vehicula placerat a sit amet metus. Praesent sodales vulputate dui et vehicula. Etiam elementum est augue, eget tincidunt ipsum molestie a. Praesent ac porttitor magna, et vehicula sapien.
</div>
</div>
</div>
</body>
</html>
.overflow-centered img {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
.overflow-centered {
position:relative;
overflow:hidden;
}
.profile-container {
width: 20%;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-left: 5%;
position: absolute;
}
.profile-image {
padding-top: 100%;
width: 100%;
bottom:0;
left: 0;
right: 0;
border-top-left-radius: 5%;
border-top-right-radius: 5%;
border: 2px solid;
border-bottom: 0px;
border-color: #ccc;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.element-nav{
height: 65px;
border-top: 3px solid;
border-color: #ccc;
position: relative;
}
.banner {
height: 300px;
width: 100%;
overflow: hidden;
position: relative;
border-bottom: 2px solid;
border-color: #ccc;
margin-bottom: 20px;
}
.banner-image {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.banner-title {
position: relative;
height: 100%;
width: 100%;
padding-left: 28%;
color: white;
background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2))
}
.banner-title h1 {
position: absolute;
bottom: 10%;
font-size: 3.5em;
}
.tab-option {
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
}
.portrait {
width: 100%;
}
.landscape {
height: 100%;
}
$(document).ready(function() {
var imgs = $('.overflow-centered img');//jQuery class selector
imgs.each(function(){
var img = $(this);
var width = img.width(); //jQuery width method
var height = img.height(); //jQuery height method
if(width < height){
img.addClass('portrait');
}else{
img.addClass('landscape');
}
})
});
