# CSS object-fit

# original images

# Base style: `img { width: 200px; height: 200px; border: 1px solid; background: #eee; }`

## Images squished

# Base style + `img { object-fit: contain }`

## Images letterboxed, correct aspect ratio maintained

# Base style + `img { object-fit: cover; }`

## Images expand to cover width and height, correct aspect ratio maintained

# Base style + `img { object-fit: none; }`

## Images expand to actual size, cropped inside set width and height, correct aspect ratio maintained