From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Position an image inside a container

Position an image inside a container

From the course: CSS: Images

Position an image inside a container

- [Instructor] When you set object fit to cover on an image, the image is automatically centered in the container. That may be what you want, but it is not always what you want. In certain circumstances, for example, with this image here, what is in the center of the image isn't what you want to display. You want to display some other portion of the image. Here, the monkey is a little bit off to the left-hand side, which means if I crop this image down to the center by making the image square, the monkey is not centered in the image, and I need to fix this somehow. I basically need to move the image in relation to the container, while retaining this crop value and object fit cover. For this purpose, we have the object position property. Object position allows us to align an element inside its container using two values, that would be the horizontal axis, and the vertical axis or simple keywords like left, top, bottom, right…

Contents