How can I fit an image in a container with CSS?

Have you ever wanted to fit an image inside a container while preserving its aspect ratio? This is a common requirement when working with images, and it can be achieved using the object-fit and object-position properties in CSS.
Generally, you can use object-fit: contain to fit the entire image within the container while preserving its aspect ratio. On the other hand, object-fit: cover will fill the container with the image while preserving its aspect ratio.
You can also use object-position to position the image within the container. For example, object-position: center will center the image, while object-position: right top will position it at the top right corner.
https://codepen.io/chalarangelo/pen/KKOwRRZ

.image-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: right top;
}

You can also use object-position to position the image within the container. For example, object-position: center will center the image, while object-position: right top will position it at the top right corner.
https://codepen.io/chalarangelo/pen/KKOwRRZ

From 30-seconds-of-code: fit-image-in-container