How to handle images of varying sizes

Option 1: img tag

Note that each of the images is a different size, which makes things difficult to style.

first image second image third image

Option 2: using object-fit setting

By using the object-fit CSS property, you can crop images w/o having to edit them.

first image second image third image

Option 3: using background images

By using a background image, you can crop the image, position the image, apply filters, and include other HTML elements inside of the image.

Label 1

Label 2

Label 3