"Image Crop 4:3"
Bootstrap 3.1.0 Snippet by escapedlion

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row"> <div class="span50"> <h1>Original Image</h1> </div> <div class="span50"> <h1>Cropped 4:3</h1> </div> </div> <div class="row"> <div class="span50"> <img src="http://www.share-international.org/magazine/old_issues/2010/images/201003_crop_circle2.jpg" alt="crop"> </div> <div class="span50"> <div class="img-crop ratio-4-to-3"> <img src="http://www.share-international.org/magazine/old_issues/2010/images/201003_crop_circle2.jpg" alt="crop cropped"> </div> </div> </div>
/** * CSS image crop. Forces image to 4:3 aspect ratio cropping at the middle. * http://dabblet.com/gist/4711695 */ .img-crop, .img-crop img{ width: 100%; /* gotta be responsive these days */ } .img-crop{ background-color: #ededed; /* some background color for short images */ overflow: hidden; /* remove white-space for inline-block elements */ letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* reset IE < 8 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .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: 75%; /* % of original image width */ } .img-crop img{ /* removes(sorta) image from the flow */ padding-left: 100%; margin: -999em -100%; } /* For layout */ /* Ignore this */ img{ max-width: 100%; } .row{ clear: both; } .span50{ width: 50%; } .row{ letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* reset IE < 8 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .row > * { /*reset letter and word spacing for inline-blocks*/ letter-spacing: normal; word-spacing: normal; } .row:before{ /* helps vertically align children*/ content:""; height: 100%; margin-left: -1px; width:1px; } .row > * , .row:before{ display: inline-block; *display: inline; *zoom: 1; /* ie7 hack */ float: none; vertical-align: middle; }

Related: See More

Navbar With Icons
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments:

thanks

Isaac Quansah| Web Designer | Website: bit.ly/isaac-amoah-quansah

Isaac Quansah () - 8 years ago - Reply 0