Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save neilmaledev/35e5b38c194e8c9ac325b13b8f78e0d6 to your computer and use it in GitHub Desktop.
Save neilmaledev/35e5b38c194e8c9ac325b13b8f78e0d6 to your computer and use it in GitHub Desktop.
Requirements: HTML, BootstrapCSS, LESScss & ANGULARJScontroller
HTML
<div class="banner">
<div class="img-container">
<img id="bannerImg" src="/img/banners/testimonial.jpg" alt="Medisource Testimonial Banner" ng-class="ngClass('bannerImg')"/>
</div>
<div class="content">
<table>
<tr>
<td class="valign-m">
<p class="text-center">
<span class="title">"TESTIMONIAL"</span>
</p>
</td>
</tr>
</table>
</div>
</div>
========================================
LESScss
.valign-m { vertical-align:middle; }
.banner {
position:relative;
height:32.5vw;
width:100%;
.img-container {
position:relative;
display:inline-block;
height:inherit;
width:inherit;
overflow:hidden;
img {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
}
.portrait {
width:100%;
}
.landscape {
height:100%;
}
}
.content {
position: absolute;
top:0;
width:100%;
height:100%;
table {
width:100%; height:100%;
}
.title {
font-weight: bold;
font-size:45px;
}
}
}
width:100%;
margin-top:-33.33%;
}
.landscape {
height:100%;
}
}
========================================
ANGULARcontroller
$scope.ngClass = function(imgId){
var img = angular.element("#" + imgId);
var imgH = img.height();
var imgW = img.width();
if (imgH > imgW || imgH == imgW) {
return {
'portrait': true
};
} else {
return {
'landscape': true
};
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment