<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 ---------->
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Original Image</h1>
<img src="http://www.share-international.org/magazine/old_issues/2010/images/201003_crop_circle2.jpg" alt="crop" class="img-responsive">
</div>
<div class="col-md-6">
<h1>Cropped 16:9</h1>
A simple upgrade to an old Image crop 4:3 snippet
<div class="img-crop">
<img src="http://www.share-international.org/magazine/old_issues/2010/images/201003_crop_circle2.jpg" alt="crop cropped">
</div>
</div>
</div>
</div>
/**
* CSS image crop. Forces image to 16:9 aspect ratio cropping at the middle.
* A fork from http://dabblet.com/gist/4711695
*/
.img-crop,
.img-crop img{
width: 100%; /* make it responsive */
}
.img-crop{
background-color: #ededed; /* some background color for short images */
overflow: hidden;
/* remove white-space for inline-block elements. This HAS to be -0.3em or more*/
letter-spacing: -0.31em; /* webkit */
*letter-spacing: normal; /* reset IE < 8 ... who cares of IE anymore?*/
}
.img-crop:before,
.img-crop img{
/* vertically center the image */
display: inline-block;
vertical-align: middle;
}
.img-crop:before{
/* pseudo element to vertically align image to */
content: "";
/* Magic Number */
/* Set this to your desired height(to width) ratio */
padding-top: 56%; /* % of original image width */
}
.img-crop img{
/* removes(sorta) image from the flow */
padding-left: 0%;
margin-left: 0%;
margin-right: 0%;
/* margin top/bottom controls the vertical position of the image,
but it has to sum at least 85% in order to preserve proportion */
margin-top:-50%;
margin-bottom: -35%;
}
/* Stylish thing only for presentation */
.img-crop{
border:1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
