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.

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.