# object-fit

## set height, variable width (good!)

Here we have four images, all 800px width, with different aspect ratios (width to height ratio or fraction) and each containing a shape (16:9 circle, 3:2 equilateral triangle, 4:3 square, 1:1 regular pentagon).

If we want to have a row of images, we can set them all up with the same height (`height: 120px;`) and allow widths to adjust according to aspect ratio of the original:

## set width and height (don't do this!) - it can squash or stretch your images

If we want the image to have the same width and the same height, we may be tempted to set both in the CSS, but this will distort the images unless the aspect ratio set in the CSS match the original image aspect ratio. Don't do this!

CSS aspect ratio set to 1:1

CSS aspect ratio set to 2:1

## set height and use object-fit: cover (good!)

If we want the image to have the same width and the same height, but not distort the image, we can use `object-fit: cover`. Note that in some cases this will result in a cropped image.

### CSS 1:1 with Cover

CSS aspect ratio set is 1:1

### CSS 2:1 with Cover

CSS aspect ratio set is 2:1 with object-fit

## Be careful with object-fit "contain" or "fill"!

### CSS 1:1 with Contain

### CSS 5:2 with Fill

## object-fit documentation and article

- object-fit | MDN
- object-fit | CSS-Tricks

## Information on Images Used

- Circle - aspectratio-16-9-circle.png, aspect ratio 16:9, dimensions 800x450
- Triangle - aspectratio-3-2-triangle.png, aspect ratio 3:2, dimensions 800x533
- Square - aspectratio-4-3-square.png aspect ratio 4:3, dimensions 800x600
- Pentagon - aspectratio-1-1-pentagon.png aspect ratio 1:1, dimensions 800x800