CSS Display an Image Resized and Cropped

Question

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the imag

Answer 1

There are services like Filestack that will do this for you.

They take your image url and allow you to resize it using url parameters. It is pretty easy.

Your image would look like this after resizing to 200x100 but keeping the aspect ratio

The whole url looks like this

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

but the important part is just

resize=width:200/crop=d:[0,25,200,100]