Bootstrap Snippet Image Crop 4:3 using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * 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%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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