Do you know how to crop an image with a CSS class? Let me show you how I would do it. Using CSS to crop an image is not a new thing but perhaps not common knowledge. With the use of the Positioning and Overflow properties it can be easy to achieve – using relative positioning with a height and width the overflow can be clipped, everything inside the width and height is visible.
For example if we set a div to have relative positioning that also has overflow set to hidden we can then set the height and width to ensure the nested image is cropped, as long as the image is bigger than the height and width then the visible image will only be whatever the height and width are set to. It’s also worth knowing what the actual dimensions of the original image are if you want to use percentages for positioning.
Note that by using WordPress as a CMS you can set your featured images to absolute sizes by adding ‘add_image_size’ to your functions file if support for ‘post-thumbnails’ is enabled. So considering that we do know what the dimensions of the image are we can proceed.
In this example we have an image of 720px x 480px
The basic markup:
[html]
<div class="example">
<p>Full size image</p>
<img alt="myimage" src="images/myimage.jpg" />
</div>
[/html]
by nesting the image in a div with a class set to relative positioning, overflow hidden and half the width and height of the image we can crop off the excess.
The css:
[css].image-cropper {
position: relative;
width: 360px;
height: 240px;
overflow: hidden;
border: 1px red solid;
}[/css]
The new markup with a nested image:
[html]
<div class="example">
<p>The new markup with a nested image</p>
<div class="image-cropper">
<img alt="myimage" src="images/myimage.jpg" />
</div>
</div>
[/html]
So next we can add a class to the img tag for further control over the cropping. Because the parent div is Relative we can use Absolute positioning on the nested class and have complete control over the position. This is where those percentages come in handy that I was on about earlier. Because I’ve just halved the size of the image on the .image-cropper class it makes it easy for us to figure out where to position the new image class with percentages.
The new css class
[css]
.centered {
position: absolute;
left: -50%;
top: -50%;
}
[/css]
The new markup
[html]
<div class="example">
<p>Center cropped image</p>
<div class="image-cropper">
<img class="centered" alt="myimage" src="images/myimage.jpg" />
</div>
</div>
[/html]
To create a new crop simply add a new class with a different position. This one will be bottom left. Because the zero point of image starts from the top left of the image, there is no need for any left positioning we only need to use the vertical height of the image and set the bottom to zero. This will tell the class to position the image flush to the bottom of the parent div.
Bottom left cropped image
[css]
.bottom {
position: absolute;
bottom: 0px;
}
[/css]
Same markup new class on image
[html]
<div class="example">
<p>Bottom left cropped image</p>
<div class="image-cropper">
<img class="bottom" alt="myimage" src="images/myimage.jpg" />
</div>
</div>
[/html]
Good so far? I hope this all makes sense! How about top centre? Easy, as before there is no need to set the position for the top because the zero point of the image starts from the top left. All that’s needed is a new class with a horizontal position and as we are using half sizes in the parent div; the equation is a simple 50% negative measure which moves the image left by… you guessed it ….. half!
Top centre
[css]
.top-centered {
position: absolute;
left: -50%;
}
[/css]
Same markup new class; enter .top-centered
[html]
<div class="example">
<p>Top center cropped image</p>
<div class="image-cropper">
<img class="top-centered" alt="myimage" src="images/myimage.jpg" />
</div>
</div>
[/html]
Obviously you can mix it up if you like by using percentages and pixels. Just by adding a new class you can create every conceivable crop. Lets say you want a bottom centre crop? Simply create a new class with a different position! As you can see from the code below by positioning the image flush to the bottom of the div using 0px and offsetting the image -50% we have achieved our goal.
Bottom centre
[css]
.bottom-centered {
position: absolute;
left: -50%;
bottom: 0px;
}
[/css]
The markup with the new class
[html]
<div class="example">
<p>Bottom center cropped image</p>
<div class="image-cropper">
<img class="bottom-centered" alt="myimage" src="images/myimage.jpg" />
</div>
</div>
[/html]
So what do you reckon so far? Well for me the only thing that’s changed is minimal, I like to call it smark-up! (smart markup) a single class controlled with discipline. The only thing that changes is the individual image class which defines the crop, used in a smart way would only require a single user defined php variable! Might get that one ready for the next post 🙂
Neat little trick 🙂
Neat little trick 🙂