CSS - Center Crop Image
Contents
About
Sometimes you want to display image thumbnails of a fixed size.... but the images themselves may be all different sizes... in face you don't even necessarily know their dimensions. With an image tag you can set a fixed height and width, but then this will probably stretch your images. There's also solution where you might add JavaScript to your code, or use server side scripts, but that seems like overkill for something which should be so easy.
Center Crop Using CSS version 3
Most modern browsers should support CSS version 3, in which case your life is now easy with object-fit and object-position. The follow examples will center crop an image so that it fits a specified size (height x width) and fills full height and width with necessary cropping.
<!doctype html>
<html lang="en">
<head>
<title>Center Crop Using CSS version 3</title>
<style>
.center-cropped {
object-fit: cover; /* Scale the image so it covers whole area, thus will likely crop */
object-position: center; /* Center the image within the element */
height: 100px;
width: 100px;
}
</style>
</head>
<body>
Center cropped:<br>
<img class="center-cropped" src="http://placehold.it/200x120"/><br>
Normal image:<br>
<img src="http://placehold.it/200x150"/><br>
</body>
</html>Note that all values for object-fit are:
- fill: default value, stretches the image to fit the content box, and may change aspect-ratio.
- contain: increases or decreases the size of the image to fill the box whilst preserving aspect-ratio.
- cover: image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
- none: image will ignore the height and width of the parent and retain its original size.
- scale-down: the image will compare the difference between none and contain in order to find the smallest concrete object size.
Meanwhile object-position defaults to 50% 50% when using object-fit, but you can give it any two numerical values, such as 0 10%, etc.
Thumbnail Within A Fixed Size - Without CSS version 3
If you don't have CSS version 3 and/or want to see the whole image inside the fixed thumbnail size you can use max-height and max-width:
<img src="http://placehold.it/100x200"/ style="max-width: 50px, max-height: 50px, background-color: #333">Problem is... this examples results in an image which is 25x50... but you still probably want to center it vertically and/or horizontally... for that you need some fancier CSS and a parent div:
<!doctype html>
<html lang="en">
<head>
<title>Centered Image Example</title>
<style>
.absolute-center-parent {
width: 50px; /* Set dimensions here */
height: 50px; /* Set dimensions here */
background-color: #999; /* To help show our containing box */
position: relative;
}
.absolute-center-child {
max-width: 100%; /* Fill size of parent */
max-height: 100%; /* Fill size of parent */
/* And remaining lines to center */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="absolute-center-parent">
<img src="http://placehold.it/200x100"/ class="absolute-center-child">
</div>
</body>
</html>So yes, not trivial. If you want to crop without using CSS version 3 there is another method where you set the image as a non-repeating background image, however I don't like that option much because you still have to try to size it up or down with max-height/max-width or min-height/max-height... and that turns out to be tricky.
Links
- Centering in CSS: A Complete Guide - pretty good interactive thingy.
