Mastering Development

Diplaying only the center of an image at a given height and width?

When medium renders a list of card showing blog posts each card has the header image shown and it’s at full width, but the center of it has been cut out.

Medium does this by cutting off the top and the bottom of each image so that they are all the same size like this:

enter image description here

Is it possible to do the same with pure CSS. It has to work for different size images. For example one image could have a height of 500px and another 1000px and both the same width, and we only want to display the 200px center of each at full width.

End end goal is to render the center of each image consistently within cards. This is how Medium’s cards look:

enter image description here

I’ve tried cropping out the top and bottom of each image, however since they are different sizes, the result ends up not having fixed dimensions.

Leave a Reply

Your email address will not be published. Required fields are marked *